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

Question

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

但是，我现在想从我的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查询中使用用户表单数据来检索相应的餐馆。

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

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或任何接收后，应该得到来自q帕拉姆“queryStrParamNameYourScriptLooksFor” uery字符串并做一些事情（我想你想将它添加到SQL查询等），然后返回一些文本或HTML在响应中。

我还看到了其他一些答案（在写这篇文章时弹出所有内容），所以我想你会很乐意去用这个东西。

祝你好运