让我首先说，我不是任何一种代码的专家，但是，我倾向于将事物拼凑在一起并使其工作！ 我的最新问题对于我的专业知识来说可能有点太技术性了。 这是我想要完成的：
我正在使用带有表单的 HTML 页面从用户那里获取唯一标识符。 然后是PHP（获取数据库信息）和JSON（将该信息解析为用于HTML的格式）。 最后，我使用 jquery 插件"填充"将此信息发送到 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"> </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>
前一个表单的目的是要求用户提供唯一标识符。 一旦用户单击"搜索预订"，此唯一标识符将用于搜索数据库以查看它是否存在...这是一个名为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 文件......思潮？
我在这里看到的主要事情之一是，您不了解停止表单提交，在后台执行请求然后处理返回的数据的过程，因此我将尽可能简单地为您概述这一点，希望它会有所帮助。
首先，我们需要捕获表单提交，在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 .学会尽可能多地遵循这些做法非常重要。