通过 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_

Answer 2

您是否在页面加载后运行您的代码？我已经多次犯过这个错误，如果你没有，我建议将整个事情包装在$(function(){ /* Everything you have */ });

Answer 3

我更喜欢使用帖子 在您的 php 脚本中，将 $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;
?>

在您的 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”？