javascript - 通过 PHP 使用 jQuery ajax 函数更新 div 内容

Question

我正在尝试通过使用 jQuery 中的 .ajax() 函数将两个输入字段的值发送到一个 php 文件 (search_value.php) 来更新我的 div 内容 (#update_div)。

如果我只是使用 html 表单 POST 方法重定向输入字段的两个值，它就可以工作。所以 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;
?>

---

我并没有真正通过点击按钮得到反馈。也许你们可以告诉我为什么？

Answer 1

对于GET请求，不应该有数据部分，将其作为查询字符串，如下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 中使用 $_GET 而不是 $GET_