0

jQuery ajax API を使用して mysql データベースからデータを取得しようとしています。私が使用している SQL クエリは正しく機能しています。ユーザー フォームを作成し、従来どおり$_POSTそのコンテンツを ing してデータベースから正しいデータを取得するかどうかをテストしたためです。

ただし、jQuery ajax 関数を使用してページをリロードせずに、mysql テーブルからデータを取得したいと考えています。私は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 つのフィールドの #values を変更します。

jQuery ajax を使用して、このフォームの入力値と選択された値を取得し、それらを php ドキュメントの変数に格納して、SQL クエリでユーザー フォーム データを使用して適切なレストランを取得できるようにしたいと考えています。


これを行う方法を学びたいと本当に思っています。どんな助けも本当に感謝しています。読んでくれてありがとう。質問の説明が曖昧で申し訳ありません。ありがとう。

4

3 に答える 3

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に追加することを選択できます。これはあなたが始めるのに十分なはずです。

于 2012-04-25T15:30:10.050 に答える
1

必要なものは比較的単純な 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
});
于 2012-04-25T15:31:15.693 に答える
1

この例は 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);
    });
  });
});

HTML

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

上記の場合、スクリプト、サーブレット、または投稿を受信するものはすべて、クエリ文字列からパラメーター「queryStrParamNameYourScriptLooksFor」を取得し、それを使用して何かを実行し (SQL クエリなどに追加する必要があると思います)、返す必要があります。応答のテキストまたは HTML。

私が見る他のいくつかの答えがあります（これを書いている間ずっとポップアップしています）ので、あなたはこのようなものにうまくいくと思います.

幸運を

于 2012-04-25T15:36:50.103 に答える