0

最初に言っておきますが、私は特定の種類のコードの専門家ではありませんが、物事をつなぎ合わせて機能させることは得意です。私の最新号は、私のノウハウには少し技術的すぎるかもしれません。これが私が達成しようとしていることです:

ユーザーから一意の識別子を取得するフォームを含む HTML ページを使用しています。次に、PHP (データベース情報を取得するため) と JSON (その情報を HTML で使用する形式に解析するため) です。最後に、jquery プラグイン「Populate」を使用して、この情報を HTML ページの目的のフォーム フィールド (一意の識別子を取得するフォームとは別のフォーム) に送信します。

2 つのフォームを含む HTML ページがあります。最初の形式:

    <form name="form_reservation" id="form-reservation">
        <div style="padding:10px 20px 10px 10px;">
            <label for="reservation-id">Reservation ID</label>
                <input name="reservationid" class="reservationid" style="width:120px !important"/>
                    <div class="json-sample" id="json-simple-sample">&nbsp;</div>
                    <input type="submit" class="button" value="Search Reservation" style="width:150px !important; margin:10px 0px 0px 5px;"/>
                    <input type="button" class="button" value="Clear" style="width:150px !important; margin:10px 0px 0px 5px;" onclick="resetForms('reservation')" />
                </div>
        </form>

この送信を取得する Javascript は次のようになります。

<script type="text/javascript">
$(document).ready(function(){
    resetForms('reservation');
    $('#form-reservation').submit(function(event){ 
        event.preventDefault();  //the page will no longer refresh on form submit. 
        var resCheck = $(this).find('input[class="reservationid"]').val(); //now we have the reservation ID, let's perform our check.
        $.ajax({ 
            url: 'inc/searchres.php', 
            type: 'POST', //default is GET, you are using POST(*SEE: [1]) 
            data: 'resid='+resCheck, 
            success: function(data){  //data is all the info being returned from the php file 
                var jsonData = $.parseJSON(data);  //parse returned JSON data so we can use it like data.name, data.whatever 
                $('#json-reservation').populate({personal_first_name:jsonData['element_1_1'],personal_last_name:jsonData['element_1_2'],personal_phone_1:jsonData['element_7'],personal_email:jsonData['element_2'],reservation_status:jsonData['ADD THIS CELL'],reservation_date:jsonData['element_3'],reservation_time:jsonData['element_4'],reservation_party:jsonData['element_5'],reservation_special_request:jsonData['element_6'],reservation_using_coupon:jsonData['element_9'],reservation_coupon_code:jsonData['element_10']});
            }
        });
    });
});
</script>

前のフォームの目的は、ユーザーに一意の識別子を求めることです。ユーザーが「Search Reservation」をクリックすると、この一意の識別子を使用してデータベースが検索され、データベースが存在するかどうかが確認されます...ページがリロードされたり、リンクが変更されたりしないようにする方法がわかりませんでした):

<?php
include('connect-searchres.php');

$term = $_POST['resid'];
$sql = mysql_query("SELECT * FROM ap_form_8 WHERE element_1_1 = '$term'"); //select first name (element_1_1) from form #8

if ($row = mysql_fetch_array($sql)){  //if reservation number exists
    if ($row['element_10'] != 'Cancelled'){  //if reservation has not already been cancelled
        if (strtotime($row['element_3']) >= strtotime(date("Y-m-d"))){  //if reservation has not already passed date
            echo json_encode($row);
        }
        else  //Reservation already passed (old reservation)
        {
            echo 'passed';
        }
    }
    else  //Reservation already cancelled
    {
        echo 'cancelled';
    }
}
else  //Reservation not found
{
    echo 'not found';
}
mysql_close();
?>

ここまでで、ユーザーは一意の番号を入力し、php ファイルはデータベースでその番号を検索しました。また、SQL クエリを JSON 形式に変換しました。次に、受信したデータを HTML ページから別のフォームに入力する必要があります。もう 1 つの形式は次のようになります (これは大きなもので申し訳ありません)。

   <form name="json_reservation" id="json-reservation" action="results.php" method="post" target="_blank" style="margin-top:15px">
                <fieldset>
                    <legend>Personal Information</legend>
                    <ul class="controls">
                        <li>
                            <label for="first-name">First Name</label>
                            <input name="personal_first_name" id="personal-first-name" type="text" class="text" maxlength="" value="" disabled readonly/>
                        </li>

                        <li>
                            <label for="last-name">Last Name</label>
                            <input name="personal_last_name" id="personal-last-name" type="text" class="text" maxlength="" value="" disabled readonly/>
                        </li>

                        <li>
                            <label for="personal[country]">Phone</label>
                            <input name="personal_phone_1" id="personal-phone-1" type="text" class="text" style="width:110px !important" maxlength="" disabled readonly/>
                        </li>
                        <li>
                            <label for="email">Email</label>
                            <input name="personal_email" id="personal-email" type="text" class="text" maxlength="" value="" disabled readonly/>
                        </li>
                    </ul>
                </fieldset>

                <fieldset>
                    <legend>Reservation Information</legend>
                    <ul class="controls">

                        <li>
                            <label for="status">Reservation Status</label>
                            <input name="reservation_status" id="reservation-status" type="text" class="text" style="width:110px !important" maxlength="" value=""  disabled readonly/>

                        </li>

                        <li>
                            <label for="date">Date</label>
                            <input name="reservation_date" id="reservation-date" type="text" class="text" style="width:110px !important" maxlength="" value="" disabled readonly/>
                        </li>

                        <li>
                            <label for="time">Time</label>
                            <input name="reservation_time" id="reservation-time" type="text" class="text" style="width:110px !important" maxlength="" value=""  disabled readonly/>
                        </li>

                        <li>
                            <label for="party">Number in Party</label>
                            <input name="reservation_party" id="reservation-party" type="text" class="text" style="width:110px !important" maxlength="" value=""  disabled readonly/>

                        </li>

                        <li>
                            <label for="specialrequest">Requests</label>
                            <textarea name="reservation_special_request" id="reservation-special-request" rows="3" wrap="virtual" class="specialrequest" style="width:60% !important" disabled readonly/></textarea>
                        </li>

                        <li>
                            <label for="coupon">Using Coupon/Promotion</label>
                            <input name="reservation_using_coupon" id="reservation-using-coupon" type="text" class="text" style="width:110px !important" value="" disabled readonly/> # <input name="reservation_coupon_code" id="reservation-coupon-code" type="text" class="text" style="width:110px !important" maxlength="" value=""  disabled readonly/>
                        </li>

                    </ul>
                </fieldset>
            </form>

とにかく、これが私がいる場所であり、この時点で、コードだけでなく方法にも多くの問題があることを知っています。そのため、この時点で高低を検索したので、ヒントをいただければ幸いです。

言及すべきもう 1 つのポイントは、1 つの HTML ページで、これらのフォームの両方が再読み込みせずにうまくやり取りできるようにしたかったということです。外部リンクは次の場所にあります: http://goo.gl/IFVv4 外部リンクのフォームの「パート 3」については気にしないでください。

更新: 上記のコードを編集して、現在の場所を示しました。あなたの助けは素晴らしく、私はかなり遠くまで行きましたが、今私の問題はphpファイルにあると思います...

4

1 に答える 1

0

ここで見た主な点の 1 つは、フォームの送信を停止し、バックグラウンドで要求を実行し、返されたデータを処理するプロセスを理解していないことです。できるだけ簡単に、うまくいけばそれが役に立ちます。

まず、フォームの送信をキャプチャする必要があります。jQuery では、次のように実行できます ->

$('#json-hierarchal').submit(function(){});

フォームの送信をキャプチャする方法がわかったので、デフォルトの動作によるページの送信と再読み込みを停止する方法を理解する必要があります。これを行うには、イベント引数にアクセスし、関数preventDefault();を適用します。. (あなたのために

$('#json-hierarchal').submit(function(event){
  event.preventDefault(); // the page will no longer refresh on form submit.
});

デフォルトの送信を停止したので、$.ajax を使用してデータを php ファイルに送信し、データを解析して、送信した内容に応じて必要なものを出力できるようにします。

$('#json-hierarchal').submit(function(event){
  event.preventDefault(); // the page will no longer refresh on form submit.
  var resCheck = $(this).find('input[class="reservationid"]').val(); //now we have the reservation ID, let's perform our check.
  $.ajax({
    url: 'searchres.php',
    type: 'POST', //default is GET, you are using POST(*SEE: [1])
    data: 'resid='+resCheck,
    success: function(data){//data is all the info being returned from the php file
      var jsonData = $.parseJSON(data);//parse returned JSON data so we can use it like data.name, data.whatever
      //I don't know how $.populate works, so I'm assuming we find each item returned in the json array, iterate over each occurence, and run populate on it?     
      $.each(jsonData, function(index,value){
        $('#form-hierarchal').populate(value);
      });
    }
  });
});

参考文献

[1] - GET/POST は、REST および SOAP プラクティスに基づいて相互にやり取りされます。サーバーからデータを取得する必要がある場合は、 を使用しますGET method(データがデータベースまたは外部ファイルからサーバーに返されることを期待しています)。データをサーバーにポストして、A) データベースに挿入するか、B) ファイルに書き込む必要がある場合 (ここでは簡単にするために) POST method、. できるだけ頻繁にこれらのプラクティスに従うことを学ぶことが非常に重要です。

于 2012-04-22T17:35:48.977 に答える