使用 jQuery AJAX 从 MYSQL 检索数据的困难

Question

我正在尝试使用 jQuery ajax api 从 mysql 数据库中检索数据。我正在使用的 SQL 查询工作正常，因为我通过创建用户表单和传统上$_POSTing 其内容来测试它是否从我的数据库中检索到正确的数据。

但是，我现在想从我的 mysql 表中检索数据，而不必使用 jQuery ajax 函数重新加载页面。我是 jQuery 的新手，我以前没有用过很多，如果有人能给我提供一个很好的例子来说明它是如何工作的，我将非常感激。我在网上查看了各种文章和指南，但我无法理解。

这是一个表格：

<form id="restaurant_reservation">
    <label for="date">Reservation Date?</label>
    <input type="text" name="date" id="date" value="yyyy-mm-dd" />

    <label for="capacity">Amount of Customers?</label>
    <input type="text" name="capacity" id="capacity" />

    <label for="license">Smoking or Non-Smoking Area?</label>

    <select id="license">
        <option value="0" id="no">Smoking</option>
        <option value="1" id="yes">Non-Smoking</option>
    </select>
</form>

这里是php代码：

<?php

$user_reservation_date = $_POST['user_date'];
$user_customer_amount = $_POST['customer_amount'];
$user_smoking_non_smoking = $_POST['user_smoking_selection'];

$my_query = "SELECT * FROM restaurant 
             WHERE $user_reservation_date = date_available
             AND $user_customer_amount >= max_seating
             AND $user_smoking_non_smoking = smoking_choice";

$result =& $db->query($my_query);

if (PEAR::isError($result)) {
    die($result->getMessage());
}


echo '<div id="output">';

echo'<table">';
echo '<th>restaurant name</th>';
echo '<th>Max Customer Seating</th>';
echo '<th>Smoking or Non Smoking</th>';
echo '<th>Average price per head</th>';

while($row =& $result->fetchRow()) {
    echo '<tr>';
    echo '<td>'.$row['rest_name'].'</td>'
    echo '<td>'.$row['max_seating'].'</td>'
    echo '<td>'.$row['smoking_choice'].'</td>'
    echo '<td>'.$row['avg_price_per_head'].'</td>'
    echo '</tr>';
}

echo '</table>';
?>

这是我对 jquery 代码的尝试：

$(function(){
    $('#date').keyup(function(){
        var user_input= $('#date').val();
    });
});

$(function(){
            $('#date').keyup(function(){

            var user_input1=$('#date').val();

            $.ajax({
                type: 'POST',
                data: ({user_date : user_input1}),
                url: 'search.php',
                success: function(data) {
                     $('#output_div').html(data);
          }
        });
    });
});

我使用相同的代码，但更改了表单中其他两个字段的#values。

我想使用 jQuery ajax 来获取此表单的输入和选定值，并将它们存储在我的 php 文档中的一个变量中，这样我就可以在我的 sql 查询中使用用户表单数据来检索适当的餐馆。

我真的很想学习如何做到这一点，我真的很感激任何帮助。非常感谢您的阅读。如果我在正确描述我的问题时含糊不清，我很抱歉。谢谢。

Answer 1

$('#restaurant_reservation').submit(function(event){
    event.preventDefault(); // prevent the default action of form submit 

 // perform an ajax request and send all your data to your script in this case 
// you would replace "yourPhpScript" the actual script name      
$.ajax({
      url: 'yourPhpScript.php',
      type: 'POST', 
      data: $('#restaurant_reservation').serialize(); // serialize your form data into key value pairs 
      success: function(data) {
        console.log( data );  // this is the response from the server and will be logged in your console. 
      }
 });

然后在yourPhpScript.php你会得到发布的数据

$date = $_POST['date']; 
$capacity = $_POST['capacity'];  // etc also your select needs a name attribute
// Then preform the mysql request and send back json encoded data or html 
so either echo "html here" 
or echo json_encode(array('data'=>'data here') ); 

然后您将看到该数据记录到客户端的控制台。然后，您可以选择将该数据附加到例如 div 中。这应该足以让你开始。

Answer 2

您想要的似乎是一个相对简单的 POST 请求，因此您可以使用jQuery.post() 快捷功能（它本身只是jQuery.ajax() 的包装器）。您将 PHP 脚本的 URL、一些可选数据（请参阅下一段）和一个可选的回调函数传递给它，该函数在成功响应 AJAX 调用后执行。

要获取表单中选定的值，您可以使用 ID 选择器选择表单 ($('#restaurant_reservation'))，然后调用 .serialize() 函数从这些值中形成 URL 参数字符串。

整个事情可能看起来像这样：

$.post('myphp.php', $('#restaurant_reservation').serialize(), function(data) {
    // do something with the response HTML
});

Answer 3

在 JQuery 站点 (http://api.jquery.com/jQuery.post/) 上有这方面的示例，但在这里，可以帮助您了解。

这里有一些东西应该从输入控件获取输入，将其发送到您的脚本、jsp、asp、servlet 或其他任何东西，获得响应并将其显示回页面上

jQuery 的东西

  $(document).ready(function(){
  $("#idOfInputControl").blur(function(){
    txt=$("#idOfInputControl").val();
    $.post("yourPHPorWhateverScript.php",{queryStrParamNameYourScriptLooksFor:txt},function(result){
      $("#idOfControlToHoldTheData").html(result);
    });
  });
});

HTML

...
<form ...>
  <input type="text" id="idOfInputControl" />
  <div id="idOfControlToHoldTheData"></div>
...

在上面的这种情况下，您的脚本、servlet 或任何接收帖子的东西，应该从查询字符串中获取参数“queryStrParamNameYourScriptLooksFor”并用它做一些事情（我猜你想将它添加到 SQL 查询等）然后在响应中返回一些文本或 HTML。

我看到了其他一些答案（在写这篇文章时一直弹出），所以我想你会很好地使用这些东西。

祝你好运