如何使用jquery ajax显示aspx页面的响应

How to display a response from aspx page using jquery ajax

本文关键字：响应 aspx 显示 何使用 jquery ajax      更新时间：2023-09-26

我正在使用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>

默认情况下，jquery的ajax方法使用HTTPGET，这会导致浏览器缓存数据，从而阻止您的第二个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字符串的数据。

相关文章：