2017-10-08 13 views
0

PHPにjavascript変数を渡して、(MySQL)クエリを作成して単一のレコードを返すことができます。ユーザーは検索文字列を入力しますが、多くのレコードに一致する文字列が含まれています。次に、ユーザーは表示したい単一のレコードを選択します。ここでonclickイベントを使用してPHPにJavascript変数を渡す方法

は私のHTML(recipe_summary.php)である:ここでは

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
    <script type="text/javascript" src="script.js"></script>  
</head> 
<body> 
<table> 
    <tr> 
     <th>Recipe ID</th> 
     <th>Title</th> 
     <th>Ingredients</th> 
     <th>Recipe</th> 
    </tr> 
    <?php foreach($search_results as $result) { ?> 
    <tr> 
     <td><a href="#" name="<?php echo $result['recipe_id']; ?>"><?php echo $result['recipe_id']; ?></a></td> 
     <td><?php echo $result['title']; ?></td> 
     <td><?php echo $result['ingredients']; ?></td> 
     <td><?php echo $result['recipe']; ?></td> 
    </tr> 
    <?php }; ?> 
</table> 
</body> 

は私のjs(script.js)である:ここでは

$(document).ready(function() { 
     var myText; 

     $("a").click(function(){ 
      myText = $(this).text(); 
      ajax_post(myText); 
     }); 

     function ajax_post(myText){ 
      var hr = new XMLHttpRequest(); 
      var url = "recipe_result.php"; 
      var passedVal = myText; 
      var myVal = "recipe_id=" + myText; 

      hr.open("POST", url, true); 
      hr.setRequestHeader("Content_type","application/x-www-form-urlencoded"); 
      hr.onreadystatechange = function() { 
       if(hr.readyState == 4 && hr.status == 200) { 
        var return_data = hr.responseText; 
        document.getElementById("status").innerHTML = return_data; 
       } 
      } 
      hr.send(myVal); 
     };  
}); 

はrecipe_result.phpです:

<!doctype html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Untitled Document</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
    <script type="text/javascript" src="script.js"></script> 
</head> 
<body> 
    <?php 
     if(isset($_POST['recipe_id'])){ 
      echo "SET"; 
     } else { 
      echo "NOT SET"; 
     } 

    ?> 
    <div id="status"></div> 

</body> 
</html> 

ユーザは、script.js上でclickイベントを引き起こすアンカータグ(recipe_summary.php)をクリックします。このタグは、recipe_ID(およびth私が迷子になる場所です)、それをajax_post()に渡します。ここから私は格納された変数を 'recipe_result.php'にphp変数として送信しようとしています。これをMySQLで使用して選択したレコードのみを返します。

On recipe_result.php $ _POST ['recipe_id']が設定されていないため、エラーがどこにないかわかりません。

私はajaxに精通していませんが、私が読んだことから、ajaxは解決策であるようです。私は非常に多くのチュートリアルを見てきました(ajax_post()のすべては、私が従おうとしていたチュートリアルのものでした)が、一般的にはHTMLフォームから始まり、その結果を同じページに書き出します。

+0

を見て、この

echo $_POST['recipe_id']; 

のようにPHPでrecipe_idを読みますか? – Farnabaz

+0

現時点では何もありません。私は何が書いているのか分からない。 – RunzWitScissors

+0

問題の内容を理解できません。あなたはいくつかのコードを持っています。それはあなたが求めていることをする必要があるように見えます。あなたがそれを実行するときに何が起こったかはあなたが言わなかった。デベロッパーツールコンソールからエラーメッセージを引用したことはありません。開発者ツールの[ネットワーク]タブに表示される要求と応答に問題は記述されていません。だから...何を求めているの? – Quentin

答えて

0

あなたのコードは正常に見える、ちょうどまた `recipe_result.php`の内容が何であるかを$_POST変数documentation

+0

元の投稿をrecipe_result.phpで更新しました... – RunzWitScissors

関連する問題