Question

我正在尝试使用jQuery ajax api从mysql数据库中检索数据。我正在使用的SQL查询正常工作，因为我已经通过创建用户表单进行了测试，并且传统上$_POST其内容以查看它是否从我的数据库中检索正确的数据。

但是，我现在想要从我的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参数字符串。 / p>

整个事情可能如下所示：

$.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。

我看到还有其他一些答案（在写这篇文章的时候弹出来）所以我想你会很高兴能够接受这些东西。

祝你好运

难以使用jQuery AJAX从MYSQL中检索数据

3 个答案: