如何在JQuery中进行多个但单独的AJAX调用

我正在尝试使用按钮进行2个单独的AJAX调用。我想要发生的是：单击Button1时ProductsTable显示来自web服务的数据;当Button2被点击时OthersTable从web服务中显示它自己的数据。但是现在，当点击任一按钮时，什么也没有显示出来。我知道代码是有效的，如果只有其中的一个，它不包围.click函数。如何在JQuery中进行多个但单独的AJAX调用

没有错误信息。 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>

来源

2010-11-19 dotnetN00b

这是奇怪的，我们可以在一个页面上有许多AJAX多个请求，我觉得有什么不对的后端，你可以观看萤火虫.NET面板的结果或有在后端的中断点 – kobe 2010-11-19 15:52:28

点击后，请求即将到来，但我可以从中看出这一点。我的语法错了吗？ – dotnetN00b 2010-11-19 17:35:38

你呈现的HTML看起来像那些按钮的样子是什么？ – 2010-11-20 00:48:56

好的。我发现ASP：Button在ajax调用之后正在引发一个回发/重载。所以看起来好像什么都没有被添加。答案是使用：

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

来源

2010-11-20 06:47:13 dotnetN00b

使用我写

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） ;”

来源

2010-11-19 15:52:02

正如我所说的看.net面板，看看结果是否来点击。如果他们来了，你在HTML代码中有一些错误。

只要删除您的绑定，并提醒完整，看看它是否打印。然后，您可以轻松打印。

使用萤火虫，.net面板，您可以轻松解决问题。

来源

2010-11-19 15:54:45 kobe

如何在JQuery中进行多个但单独的AJAX调用

回答

相关问题