使用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在響應中。

我還看到了其他一些答案（在寫這篇文章時彈出所有內容），所以我想你會很樂意去用這個東西。

祝你好運