我知道这很复杂，我是jscript和AJAX的完全新手，所以请温柔，因为我会得到它。我在2天内走了很长的路。
我有一个GET API，可以根据需要构建AJAX输出，最后执行document.write。这很有效。
现在我需要在AJAX输出之上添加搜索功能 - 如果我把它放在HTML中，它会在document.write输出发生时写入，所以我把它放在Success之后但是在Ajax输出之前。它确实显示但是我没有取得多大成功使它工作，我在这个项目上的时间很短，所以如果你能提供帮助，我真的很感激。
我必须对此代码进行大量编辑才能将其放在此处，但它可以正常工作（Search Zip输入字段和“提交”按钮除外）。
<html xmlns="//www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rent Properties</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style type="text/css">
#dvLoading
{
/*background:#000 url("/images/loading.gif") no-repeat center center;*/
height: 230px;
width: 600px;
position: fixed;
z-index: 1000;
left: 10%;
top: 50px;
margin: 0px 0 0 0px;
}
#Search
{
background-color:#f0f0f0;
height: 40px;
width: 600px;
position: fixed;
z-index: 1;
left: 10%;
top: 0%;
margin: 0px 0 0 0px;
}
#Properties
{
background-color:#f0f0f0;
height: 40px;
width: 600px;
position: fixed;
z-index: 1;
left: 10%;
top: 50px;
margin: 0px 0 0 0px;
}
</style>
<div id='dvLoading'><font style="font-size:3em"><i>Loading ... Please be patient.</font></i><br><br></div>
<!--<p id='Search' style='vertical-align:top'><table style='background-color:silver;padding:6px'><tr><td>Zip: <input type='text' name='zip' id='zip'> <a href='#' id='getdata-button'>Submit</a><br></td></tr></table><BR><BR>-->
<script type="text/javascript">
var json_obj = "";
var json_obj2 = "";
var json_obj3 = "";
var output = "";
var VProp = "";
var Prop = "";
var URL2 = "";
var URL3 = "";
var Img0 = "";
var Img = "/images/ImgNF.png";
var propblk = [];
var zip = "";
$(document).ready(function () {
jQuery.support.cors = true;
// !!!! Trying to get Search Zip here
$('#getdata-button').click(function () {
zip = document.getElementById('zip').value;
document.write("Zip: " + zip + "<BR>");
});
$.ajax({
url: "http://www.xxxxx.com/xxxxxx.aspx?requestType=apartmentavailability&companyCode=xxxxxx",
dataType: "text",
async: true,
cache: false,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
crossDomain: true,
success: function (data) {
output = "<p style='vertical-align:top'><table style='background-color:silver;padding:6px'><tr><td>Zip: <input type='text' name='zip' id='zip'><a href='#' id='getdata-button'>Submit</a><br></td></tr></table><BR><BR>"; // I know - this should be in CSS but not sure how to incorporate it
document.write(output);
json_obj = $.parseJSON(data);
for (var i in json_obj)
{
if (i == 0) {
output = "<center><table id='Properties' style='background-color:#4A4C4E;text-align:center;width:90%;position: fixed;z-index: 10;left: 3%;top: 52px;' width='90%'><tr>"
output += "<td width='30%' style='background-color:green;vertical-align:top;text-align:left;padding:12px'><font style='color:white;font-family:Verdana'>";
}
else {
output = "<td width='30%' style='background-color:green;vertical-align:top;text-align:left;padding:12px'><font style='color:white;font-family:Verdana'>";
}
VProp = json_obj[i].VPropCode;
URL2 = "http://api.xxxxxxxx.com/xxxxxapi.aspx?requestType=property&type=propertyData&companyCode=xxxxxx&VPropCode=" + VProp;
$.ajax({
url: URL2,
dataType: "text",
async: false,
cache: false,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
crossDomain: true,
success: function (data) {
json_obj2 = $.parseJSON(data);
Prop = json_obj2[0].PropertyCode;
var zipcode = json_obj2[0].zipcode;
var fnd = -1;
if (zip == "") { fnd = 0; }
else { fnd = zipcode.search(zip); }
if (fnd >= 0) {
json_obj3 = "";
URL3 = "http://api.xxxxxxx.com/xxxxxxapi.aspx?requestType=images&type=propertylmages&companyCode=xxxxx&propertyCode=" + Prop;
$.ajax({
url: URL3,
dataType: "text",
async: false,
cache: false,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
crossDomain: true,
success: function (data) {
json_obj3 = $.parseJSON(data);
if (json_obj3[0].ImageURL) {
Img0 = json_obj3[0].ImageURL;
output += "<center><A href=renttest2.htm?Prop=" + Prop + "><img src='" + Img0 + "' width=250 height=168></a></center><br>";
}
else { output += "<center><A href=renttest2.htm?Prop=" + Prop + "><img src='" + Img + "' width=250 height=168></a></center><br>"; }
},
error: function () {
output += "<center><A href=renttest2.htm?Prop=" + Prop + "><img src='" + Img + "' width=250 height=168></a></center><br>";
}
});
output += json_obj2[0].address + "<BR>" + json_obj2[0].city + ", " + json_obj2[0].state + " " + json_obj2[0].zipcode + "<BR>Floor Plan: " + json_obj[i].FloorplanName + "<BR>Bedrooms: " + json_obj[i].Beds + "<BR>Baths: " + json_obj[i].Baths + "<BR>Sq Ft: " + json_obj[i].SQFT;
output += "<br><center><table style='border:1px solid black;background-color:gray;padding:4px'><TR><TD><A href=renttest2.htm?Prop=" + Prop + " style='color:white;font-family:Arial;'>Detail</a></td></tr></table></td><td width='3%'> </td>";
if (i == 2 || i == 5) { output += "</tr><tr>"; } // I know how to check "divided by" in PHP but not jscript - I can figure that out
propblk[i] = output;
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
document.write("Status2: " + textStatus);
document.write("Error2: " + errorThrown);
}
});
}
// starting to set up for paging, 6 per display
for (x = 0; x < 6; x++) {
if (propblk[x]) {
document.write(propblk[x]);
}
}
output += "</td></tr><tr><td colspan=10><br>End of Data</td></tr></table></center></p>";
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
document.write("Status: " + textStatus);
document.write("Error: " + errorThrown);
}
});
});
</script>
</head>
<body>
</body>
</html>
答案 0 :(得分：0)
我通常会在文档的某处放置一个空div，然后使用AJAX的结果创建html代码来填充div。
<div id="myDiv"></div>
您已经在输出变量中获得了html代码，然后使用
$('#myDiv').html(output);
这将用你输出的内容替换div里面的所有html。如果您不想全部替换它，只需在div的末尾添加更多内容（例如在表格的底部添加1行），然后使用
$('#myDiv').append(output)
您仍然需要设置样式并将div放置在您想要的位置。这是处理你情况的一种非常常见的方式。