如何使用 jquery ajax 显示来自 aspx 页面的响应答案

【问题标题】：How to display a response from aspx page using jquery ajax如何使用 jquery ajax 显示来自 aspx 页面的响应
【发布时间】：2012-02-26 17:56:03
【问题描述】：

我正在使用ajax jquery 请求aspx 页面，该页面显示GidView，因此响应将是网格视图的html 代码。我将响应添加到 DIV 以显示结果，当我第一次发出请求时它工作正常，但在第二次响应中没有添加任何内容，尽管有要绑定的数据。

** 这个问题只出现在 FireFox 的 IE 浏览器中，没问题！ **

ajax 请求：

  function getSubTraning(mainId) {
            $(".res" + mainId).html("");
            startLoad();
            $.ajax({
                url: "ajax/GetSubTraining.aspx",
                data: { mainId: mainId },
                success: function (a) {
                    stopLoad();
                    $(".res" + mainId).append(a);
                }
            });

        }

GetSubTraining.aspx html 代码

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="GetSubTraining.aspx.vb" Inherits="Admin_ajax_GetSubTraining" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    <form id="form1" runat="server">
    <div>

        <asp:GridView ID="gvSubTraning" runat="server" 
            AutoGenerateColumns="False" 

            BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" 
            BorderWidth="1px" 

            CellPadding="4" EnableModelValidation="True" 
            ForeColor="Black" 

            GridLines="Horizontal" Width="100%" DataSourceID="SqlDataSource1">
            <EmptyDataTemplate>
                No sub training to view !
            </EmptyDataTemplate>
            <Columns>
                <asp:BoundField DataField="Train_S_Desc_Ar" 
                    HeaderText="Sub training needs" 

                    SortExpression="Train_S_Desc_Ar">
                <HeaderStyle HorizontalAlign="Left" />
                <ItemStyle HorizontalAlign="Left" Width="95%" />
                </asp:BoundField>
                <asp:TemplateField ShowHeader="False">
                    <ItemStyle Width="5%" />
                </asp:TemplateField>
                <asp:TemplateField SortExpression="Train_S_Indx">
                    <ItemTemplate>

                        <input type="button" class='btnRemoveSub' title="<%# Eval("Train_S_Indx") %>-<%# Eval("Train_M_Indx") %>" value="Remove" />
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Train_S_Indx") %>'></asp:TextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
            </Columns>
            <FooterStyle BackColor="#CCCC99" ForeColor="Black" />
            <HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />
            <%-- <SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />--%>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:Con_New %>" 
            SelectCommand="getSubTtraining" SelectCommandType="StoredProcedure">
            <SelectParameters>
                <asp:QueryStringParameter Name="mainId" QueryStringField="mainId" 
                    Type="Int32" />
            </SelectParameters>
        </asp:SqlDataSource>

    </div>
    </form>

【问题讨论】：

标签： javascript asp.net ajax internet-explorer firefox

【解决方案1】：

默认情况下，jquery 的 ajax 方法使用 HTTP GET，这会导致浏览器缓存数据，从而阻止您的第二个 ajax 请求到达服务器。改用 HTTP POST：

function getSubTraning(mainId) {
    $(".res" + mainId).html("");
    startLoad();
    $.ajax({
        type: 'POST',
        url: "ajax/GetSubTraining.aspx",
        data: { "mainId": "mainId" },
        success: function (data) {
            stopLoad();
            $(".res" + mainId).append(data);
        }
    });
}

或者，使用 jquery 的 post 方法，它在某些情况下是 ajax 方法的简写，比如你的：

function getSubTraning(mainId) {
    $(".res" + mainId).html("");
    startLoad();
    $.post({
        "ajax/GetSubTraining.aspx",
        { "mainId": "mainId" },
        function (data) {
            stopLoad();
            $(".res" + mainId).append(data);
        }
    });
}

此外，引用 json 字符串数据更安全，因为某些系统会阻塞未引用的 json 字符串数据。

【讨论】：