在 PHP 上使用 jQuery ajax 函数更新 div 内容

Question

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

的函数

如果我只是使用 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

我更喜欢使用 post 在您的 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”？

在 PHP 上使用 jQuery ajax 函数更新 div 内容

Updating div content with jQuery ajax function over PHP

javascript

php

ajax

jquery

form-submit