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); 
      } 
     }); 
    }); 
}); 

私は同じコードを使用しますフォームから他の2つのフィールドの＃値を変更します。

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')); 

になるだろう。次に、そのデータをa 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、サーブレットまたは何に送信し、応答を取得し、ページに戻って表示されるべきもの

jQueryのもの

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

です

上記この場合

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

HTML、スクリプト、サーブレットまたは何でもそれはポストを受け取るには、PARAMを取得する必要があります「queryStrParamNameYourScriptLooksFor」QからあなたはそれをSQLクエリなどに追加したいと思っています。そして、レスポンスにテキストやHTMLを返します。

私はこの記事を書いている間にすべてをポップアップ表示するので、あなたはこのものと一緒に行けばいいと思います。

幸運