Обновление содержимого div с помощью функции jQuery ajax через PHP

Я пытаюсь обновить содержимое div (#update_div), отправив значение двух полей ввода в файл php (search_value.php ) с помощью функции .ajax() из jQuery.

Это работает, если я просто перенаправлю два значения полей ввода, используя метод POST html-формы. Так что 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;
?>

Я действительно не получаю обратной связи нажав на кнопку. Может быть, вы, ребята, скажете мне, почему?

Author: Pascal, 2016-05-21
Source

4 answers

Для запроса 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);
   }
  });
});

И используйте $_GET вместо $GET_ в php

 2
Author: Karthik M R, 2016-05-21 18:56:58

Вы запускаете свой код после загрузки страницы? Я совершал эту ошибку несколько раз, и если это не так, я предлагаю обернуть все это в $(function(){ /* Everything you have */ });

 1
Author: GMchris, 2016-05-21 18:12:19

Я предпочитаю использовать сообщение в вашем 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);
    }
  });
});
 1
Author: hacene abdessamed, 2016-05-21 18:12:31

Протестировано, и ваш код JavaScript работает. Проблема может быть в коде PHP. Вы пробовали исправить "$_GET", как предлагали другие?

 1
Author: yuriy636, 2016-05-21 19:01:53