如何使用jQuery Ajax显示aspx页面的响应

Question

I am using ajax jquery to request a aspx page and this page displays a GidView , so the response will be the html code for the grid view. 我正在使用ajax jquery请求一个aspx页面，并且此页面显示GidView ，因此响应将是网格视图的html代码。 and I add the response to DIV to show the result, when I make the request in the first time it works fine, but in the second time nothing added from the response, despite there are a data to bind. 并且我将响应添加到DIV以显示结果，当我第一次发出请求时，它可以正常工作，但是第二次，即使有要绑定的数据，响应中也没有添加任何内容。

** This problem appear ONLY in IE browsers in FireFox, it si OK ! **此问题仅在FireFox的IE浏览器中出现，可以！ ** **

ajax request : 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 code 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>

Answer 1

By default, jquery's ajax method uses HTTP GET, which causes the browser to cache the data, which in turn stops your second ajax request from reaching the server. 默认情况下，jquery的ajax方法使用HTTP GET，这会导致浏览器缓存数据，从而阻止您的第二个ajax请求到达服务器。 Use HTTP POST instead: 改用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);
        }
    });
}

Alternatively, use jquery's post method, which is shorthand for the ajax method in some cases, like yours: 或者，使用jquery的post方法，在某些情况下，它是ajax方法的缩写，例如您的方法：

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

In addition, it is safer to quote json string data because some systems choke on unquoted json string data. 另外，引用json字符串数据更安全，因为某些系统会阻塞未引用的json字符串数据。

如何使用jQuery Ajax显示aspx页面的响应

问题描述

1 个解决方案

解决方案1
1 2012-02-26 19:42:21

如何使用jQuery Ajax显示aspx页面的响应

问题描述

1 个解决方案

解决方案1 1 2012-02-26 19:42:21

解决方案1
1 2012-02-26 19:42:21