$.ajax 不适用于 ASP.NET

Question

我正在尝试调用 $.ajax 方法来根据搜索条件检索 NORTHWND 员工的详细信息。但是，出于某种原因，country 和 title 变量总是返回 null。我不明白我哪里做错了。

下面是清晰的解释。

下面是AjaxDemoRequestPage.aspx

中的代码

<form id="form1" runat="server">
        <div>
            Country:
            <asp:TextBox ID="txtCountry" runat="server"></asp:TextBox>
            Title:
            <asp:TextBox ID="txtTitle" runat="server"></asp:TextBox>
            <asp:Button ID="btnAjax" runat="server" Text="$.ajax()" />
            <div id="container"></div>
        </div>
        <script src="Scripts/jquery-3.2.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#btnAjax").click(function (evt) {
                    var data = {};
                    data.country = $("#txtCountry").val();
                    data.title = $("#txtTitle").val();
                    debugger;
                    $.ajax({
                        url: "PostTarget.aspx",
                        type: "POST",
                        data: data,
                        contentType: "x-www-form-urlencoded;charset=UTF-8",
                        dataType: "json",
                        success: SuccessfulAjaxResponse,
                        error: ErroticAjaxResponse
                    });
                    evt.preventDefault();
                });
            });
            function SuccessfulAjaxResponse(results, status, jqXHR) {
                $("#container").empty();
                debugger;
                for (var i = 0; i < results.length; i++) {
                    $("#container").append("<tr>" +
                        "<td>" + results[i].EmployeeID + "</td>" +
                        "<td>" + results[i].FirstName + "</td>" +
                        "<td>" + results[i].LastName + "</td>"
                        );
                }
            }

            function ErroticAjaxResponse(jqXHR, status, error) {
                alert("Error: " + error);
            }
        </script>
    </form>

下面是 PostTarget.aspx.cs 页面中的代码。在此页面中，调试时我总是得到 country 和 title 作为 null.

public partial class PostTarget : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        var country = Request.Form["country"];
        var title = Request.Form["title"];
        var db = new NORTHWNDEntities();
        var emps = db.Employees
            .Where(x => x.Country.Contains(country) || x.Title.Contains(title))
            .Select(x => new EmployeeSearchResult
        {
            EmployeeID = x.EmployeeID,
            FirstName = x.FirstName,
            LastName = x.LastName
        });
        Response.Clear();
        Response.Write(JsonConvert.SerializeObject(emps));
        Response.Flush();
        Response.End();
    }
}

谁能告诉我哪里做错了？

Answer 1

由 ASP.NET 生成的

ID 将与您提供的不同。这就是您获得空值的原因。

您可以通过这种方式访问javascript中的ASP.NET控件。

document.getElementById('<%= txtCountry.ClientID %>').value

您也可以简单地使用 html 按钮而不是 ASP.NET 按钮来发出 ajax 请求。

这是您更新后的代码。

<form id="form1" runat="server">
        <div>
            Country:
            <asp:TextBox ID="txtCountry" runat="server"></asp:TextBox>
            Title:
             <asp:TextBox ID="txtTitle" runat="server"></asp:TextBox> 

            <!-- <asp:Button ID="btnAjax" runat="server" Text="$.ajax()" />-->
            <input type="button" id="btnAjax" value="$.ajax()"/>

            <div id="container"></div>
        </div>
        <script src="Scripts/jquery-3.2.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#btnAjax").click(function (evt) {
                    var data = {};
                    data.country =document.getElementById('<%= txtCountry.ClientID %>').value;
                    data.title = document.getElementById('<%= txtTitle.ClientID %>').value;
                    debugger;
                    $.ajax({
                        url: "PostTarget.aspx",
                        type: "POST",
                        data: data,
                        contentType: "x-www-form-urlencoded;charset=UTF-8",
                        dataType: "json",
                        success: SuccessfulAjaxResponse,
                        error: ErroticAjaxResponse
                    });
                    evt.preventDefault();
                });
            });
            function SuccessfulAjaxResponse(results, status, jqXHR) {
                $("#container").empty();
                debugger;
                for (var i = 0; i < results.length; i++) {
                    $("#container").append("<tr>" +
                        "<td>" + results[i].EmployeeID + "</td>" +
                        "<td>" + results[i].FirstName + "</td>" +
                        "<td>" + results[i].LastName + "</td>"
                        );
                }
            }

            function ErroticAjaxResponse(jqXHR, status, error) {
                alert("Error: " + error);
            }
        </script>
    </form>

Answer 2

contentType应该是这样的：

contentType: "application/x-www-form-urlencoded;charset=UTF-8",

Answer 3

我的失误是我从未调用过 $.ajax 方法。下面是修改后的工作代码。

<form id="form1" runat="server">
        <div>
            Country:
            <asp:TextBox ID="txtCountry" runat="server"></asp:TextBox>
            Title:
             <asp:TextBox ID="txtTitle" runat="server"></asp:TextBox> 

            <!-- <asp:Button ID="btnAjax" runat="server" Text="$.ajax()" />-->
            <input type="button" id="btnAjax" value="$.ajax()"/>

            <div id="container"></div>
        </div>
        <script src="Scripts/jquery-3.2.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#btnAjax").click(function (evt) {
                    var data = {};
                    data.country =document.getElementById('<%= txtCountry.ClientID %>').value;
                    data.title = document.getElementById('<%= txtTitle.ClientID %>').value;
                    debugger;
                    $.ajax({
                        url: "PostTarget.aspx",
                        type: "POST",
                        data: data,
                        contentType: "x-www-form-urlencoded;charset=UTF-8",
                        dataType: "json",
                        success: SuccessfulAjaxResponse,
                        error: ErroticAjaxResponse
                    });
                    $.ajax(data);
                    evt.preventDefault();
                });
            });
            function SuccessfulAjaxResponse(results, status, jqXHR) {
                $("#container").empty();
                debugger;
                for (var i = 0; i < results.length; i++) {
                    $("#container").append("<tr>" +
                        "<td>" + results[i].EmployeeID + "</td>" +
                        "<td>" + results[i].FirstName + "</td>" +
                        "<td>" + results[i].LastName + "</td>"
                        );
                }
            }

            function ErroticAjaxResponse(jqXHR, status, error) {
                alert("Error: " + error);
            }
        </script>
    </form>

$.ajax 不适用于 ASP.NET

$.ajax is not working with ASP.NET

c#

asp.net

ajax

jquery

asp.net-ajax