0

首先让我说我不是任何一种代码的专家，但是，相反，我倾向于将事情拼凑起来并使其工作！我的最新一期可能对我的技术来说有点太技术性了。这是我想要完成的事情：

我正在使用带有表单的 HTML 页面来获取用户的唯一标识符。然后是 PHP（获取数据库信息）和 JSON（将这些信息解析为 HTML 格式）。最后，我使用 jquery 插件“Populate”将此信息发送到 HTML 页面上所需的表单字段（与获取唯一标识符的表单不同的表单）。

我有一个 HTML 页面，上面有 2 个表单。第一种形式：

    <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”，这个唯一标识符就被用来搜索一个数据库，看看它是否存在……这是一个名为 searchres.php 的外部 php 文件（我想我意识到这个 php 文件没有正确链接到表单，因为我无法弄清楚如何做到这一点，因此页面不会重新加载或更改链接）：

<?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 页面中的另一个表单。另一种形式看起来像（对不起，这是一个很大的）：

   <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>

所以无论如何，这就是我所处的位置，在这一点上，我知道不仅我的代码存在很多问题，而且我的方法也存在很多问题。正因为如此，任何提示将不胜感激，因为我在这一点上搜索了高低。

另一点要提的是，我真的希望这两种表单都能在一个 HTML 页面上很好地交互，而无需重新加载它。可以找到外部链接：http: //goo.gl/IFVv4 不要担心外部链接上表格的“第 3 部分”，因为那是我以后会搞砸的东西。

更新：我已经编辑了上面的代码以显示我现在的位置。您的帮助非常好，让我走得很远，但现在我认为我的问题存在于 php 文件中......想法？

4

1 回答 1

0

我在这里看到的主要内容之一是您不了解停止表单提交、在后台执行请求以及处理返回的数据的过程，因此我将为您概述这一点尽可能简单，希望它会有所帮助。

首先，我们需要捕获表单提交，在 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 回答