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

【问题标题】：How to make multiple, but separate AJAX calls in JQuery如何在 JQuery 中进行多个但单独的 AJAX 调用
【发布时间】：2010-11-19 15:35:49
【问题描述】：

我正在尝试使用按钮进行 2 个单独的 AJAX 调用。我想要发生的是：当单击 Button1 时 ProductsTable 显示来自网络服务的数据；单击 Button2 时，OthersTable 会显示来自 web 服务的自己的数据。但是现在，当单击任一按钮时，什么都没有显示。我知道如果只有其中一个代码并且它没有包裹在 .click 函数周围，则该代码可以工作。

没有错误消息。 ASP.NET 4.0，JQuery 1.4.4。不使用 ScriptManager。不使用更新面板。

代码如下：

<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 请求，我认为后端有问题，您可以在 firebug .net 面板中查看结果还是在其中设置断点后端
点击后请求就通过了，但我只能从中看出这一点。我的语法错了吗？
这些按钮呈现的 HTML 是什么样的？
好的。我发现 ASP:Button 在 ajax 调用之后立即导致回发/重新加载。所以看起来没有添加任何内容。答案是使用 $('#Button1').Click(function(evt) { evt.preventDefault(); .... ajax 代码 .... });

标签： asp.net jquery jquery-templates

【解决方案1】：

好的。我发现 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>`

【讨论】：

【解决方案2】：

正如我所说，观察 .net 面板，看看点击是否会出现结果。如果他们来了，那么您的 html 代码中有一些错误。

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

使用firebug、.net面板，可以轻松解决问题。

【讨论】：

【解决方案3】：

使用我编写的以下函数

    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);"

【讨论】：