[英]How to make multiple, but separate AJAX calls in JQuery
我正在嘗試使用按鈕進行2個單獨的AJAX調用。 我想發生的事情是:單擊Button1時,ProductsTable將顯示來自Web服務的數據; 單擊Button2時,OthersTable將顯示來自Web服務的自身數據。 但是現在,當單擊任一按鈕時,沒有任何顯示。 我知道代碼只有在其中之一且沒有環繞.click函數的情況下才有效。
沒有錯誤訊息。 ASP.NET 4.0,JQuery 1.4.4。 不使用ScriptManager。 不使用UpdatePanels。
代碼如下:
<script src="Scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script id="ProductsTemplate" type="text/x-query-tmpl">
<tables id="ProductsTemplate">
<thead>
</thead>
<tbody>
{{each d}}
{{tmpl($value) '#ProductsRowTemplate'}}
{{/each}}
</tbody>
</tables>
</script>
<script id="ProductsRowTemplate" type="text/x-query-tmpl">
<tr>
<td>${title}</td>
<td>${size}</td>
<td>${price}</td>
</tr>
</script>
<script id="Products2Template" type="text/x-query-tmpl">
<tables id="Products2Template">
<thead>
</thead>
<tbody>
{{each d}}
{{tmpl($value) '#Products2RowTemplate'}}
{{/each}}
</tbody>
</tables>
</script>
<script id="Products2RowTemplate" type="text/x-query-tmpl">
<tr>
<td>${title}</td>
<td>${size}</td>
<td>${price}</td>
</tr>
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function () {
$.ajax({
type: "POST",
url: "JSON-WebService.asmx/getProducts",
data: "{}",
contentType: "application/json; charset=UTF-8",
dataType: "json",
success: function (data) {
$('#ProductsTemplate').tmpl(data).appendTo('#ProductsTable');
alert("Products works");
},
failure: function (data) {
alert("Products didn't work");
}
});
});
$("#Button2").click(function () {
$.ajax({
type: "POST",
url: "JSON-WebService.asmx/getProducts",
data: "{}",
contentType: "application/json; charset=UTF-8",
dataType: "json",
success: function (data) {
$('#Products2Template').tmpl(data).appendTo('#OthersTable');
alert("Products2 works");
},
failure: function (data) {
alert("Products2 didn't work");
}
});
});
});
</script>
<title>Using JQuery</title>
<form id="form1" runat="server">
<div id="ProductsTable">
</div>
<div id="OthersTable">
</div>
<div>
<asp:Button ID="Button1" runat="server" Text="Products" />
<asp:Button ID="Button2" runat="server" Text="Products2" />
</div>
</form>
好。 我發現,ajax調用后,ASP:Button引起了回發/重新加載。 因此,似乎沒有添加任何內容。 答案是使用:
`<script type="text/javascript">
$(document).ready(function () {
$("#Button1").click(function (evt) {
evt.preventDefault();
$.ajax({
type: "POST",
url: "JSON-WebService.asmx/getProducts",
data: "{}",
contentType: "application/json; charset=UTF-8",
dataType: "json",
success: function (data) {
$('#ProductsTemplate').tmpl(data).appendTo('#ProductsTable');
alert("Products works");
},
failure: function (data) {
alert("Products didn't work");
}
});
});
});
</script>`
使用我編寫的以下函數
function jqajax(urlp,thediv) {
$.ajax({
type: "GET",
url: urlp,
dataType: "html",
//data: "header=variable",
success: function(data){
if($('#'+thediv))
{
$("#"+thediv).html(data);
}
else
{
$("#"+thediv).parent().html(data);
}
}
});
}
使用它,你可以
onclick =“ jqajax(yoururlhere,returnedhtml_div_here);”
就像我說的,觀察.net面板,看看結果是否來自點擊。 如果他們來了,那么您的html代碼中就有錯誤。
只需卸下裝訂夾並提醒完整裝訂,然后查看是否可以打印,然后即可輕松打印。
使用Firebug,.net面板,可以輕松解決問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.