PHP経由でjQuery ajax関数でdivコンテンツを更新する

Question

jQueryの.ajax（）関数を使用して、2つの入力フィールドの値をphpファイル（search_value.php）に送信してdivコンテンツ（#update_div） 。

htmlフォームのPOSTメソッドを使用して入力フィールドの2つの値をリダイレクトするだけで動作します。 search_value.phpは正しいはずです。

---

私のHTMLコード：

<form id="my_form"> 
    <input id="food" name="food"> 
    <input id="amount" value="amount in gram" name="amount"> 
    <input type="button" value="Update" id="submit" name="submit" /> 
</form> 

<div id="update_div"> 
</div> 

---

私のJavascriptのコード：

$("#submit").click(function() { 
    var food = $("#food").val(); 
    var amount = $("#amount").val(); 
    $.ajax({ 
    url: 'search_value.php', 
    type: 'GET',    
    data: {"food":food,"amount":amount}, 
    success: function(data) 
    { 
     $('#update_div').html(data); 
    } 
    }); 
}); 

---

私のPHPコード：

<?php 
    $pdo = new PDO('mysql:host=localhost;dbname=calotools', 'root', ''); 

    $food = $GET_['food']; 
    $amount = $GET_['amount']; 

    $query="SELECT * FROM nahrungsmittel WHERE name = '$food'"; 

    $user = $pdo->query($query)->fetch(); 
    echo $user['name']."<br />"; 
    echo $user['kcal']/100 * $amount; 
?> 

---

私は本当にボタンをクリックしてフィードバックを得ることはありません。なぜあなたは私にその理由を教えることができますか？ GETリクエストのために

Answer 1

、そこjsのコード以下のようにクエリ文字列としてそれを作る、データ部分であってはならない。

$("#submit").click(function() { 
    var food = $("#food").val(); 
    var amount = $("#amount").val(); 
    $.ajax({ 
    url: 'search_value.php?food='+ food + '&amount='+amount, 
    type: 'GET', 
    datatype: "html", 
    success: function(data) 
    { 
    $('#update_div').html(data); 
    }, 
    failure : function(ex) 
    { 
     console.log(ex); 
    } 
    }); 
}); 

とPHP

Answer 2

に$_GET代わりの$GET_を使用し、あなたのコードを実行していますページが読み込まれた後？私は$GET_

$_POSTによって

<?php 
    $pdo = new PDO('mysql:host=localhost;dbname=calotools', 'root', ''); 

    $food = $_POST['food']; 
    $amount = $_POST['amount']; 

    $query="SELECT * FROM nahrungsmittel WHERE name = '$food'"; 

    $user = $pdo->query($query)->fetch(); 
    echo $user['name']."<br />"; 
    echo $user['kcal']/100 * $amount; 
?> 

を交換するPHPスクリプトでポスト を使用して好む私はその間違いを何度か作った、とあなたがいないのであれば、私は$(function(){ /* Everything you have */ });

Answer 3

で全体を包む示唆しますあなたのjavascriptのコードの結果がここにdata.responseText

に発見された新しいスクリプト

$("#submit").click(function() { 
    var food = $("#food").val(); 
    var amount = $("#amount").val(); 
    $.ajax({ 
    url: 'search_value.php', 
    type: 'POST',    
    data: {"food":food,"amount":amount}, 
    success: function(data) 
    { 
     $('#update_div').html(data.responseText); 
    } 
    }); 
}); 

Answer 4

テスト済みで、JavaScriptコードが動作します。問題はPHPコード内にある可能性があります。 "$ _GET"を他人の提案通りに修正しようとしましたか？