Question

我有一个只有UserName和Password字段的注册页面。我想在提交按钮的Click事件上提交新的用户详细信息。请告诉我如何使用jquery使用ajax调用。我在ASP.net中点击按钮定义了插入功能。但它不起作用。

function Insert() {
    alert("Insert");

    var uname = $('#txtRUserName').val();

    alert(uname)
    var password = $('#txtRPassword').val();
    $.ajax({type: "POST",
            url: "login.aspx/Insert",
            data: "{'uname:'" + uname + ",'password:'" + password + "}",
            datatype: "text/html",
            cache: false,
            async: false,
            contentType: "text/html",
            success: function processData(r) {
                var myItem = r.d.split('#');
                alert(myItem)
            }
            //error: errorAlert
        });
    alert("jqajax")
}

Answer 1

有效的json，ContentType和DataType

您可以将通话更改为有效的json，即

data: "{uname:'" + uname + "',password:'" + password + "'}",

您的内容类型必须是：

contentType: "application/json; charset=utf-8"

您的数据类型必须是：

dataType: "json"

所以你的javascript会变成：

function Insert() {
    alert("Insert");

    var uname = $('#txtRUserName').val();

    alert(uname)
    var password = $('#txtRPassword').val();
    $.ajax({type: "POST",
            url: "login.aspx/Insert",
            data: "{uname:'" + uname + "',password:'" + password + "'}",
            datatype: "json",
            cache: false,
            async: false,
            contentType: "application/json; charset=utf-8",
            success: function processData(r) {
                var myItem = r.d.split('#');
                alert(myItem)
            }
            //error: errorAlert
        });
    alert("jqajax")
}

<强>的EnablePageMethods

您需要在脚本管理器中启用页面方法，如下所示：

<asp:ScriptManager runat="server" EnablePageMethods="true">

页面背后代码

您还需要确保您的方法具有[WebMethod]属性，并且也是静态的，例如：

[WebMethod]
public static bool Insert(string uname, string password)

Answer 2

在发布表单时，$(this).serializeArray();会处理输入数据

  $(document).ready(function(){
        $('form').submit(function( e ) {
            var postData = $(this).serializeArray();
            $.ajax({
               datatype: "text/html",
               cache: false,
               async: false,
               contentType: "text/html",
                type: 'post',
                url: 'page.php',
                data: postData,
                success: function () {
                  var myItem = r.d.split('#');
                  alert(myItem)
                }
            });
            e.preventDefault();
        });
    });

编辑：将$（'form'）更改为表单ID。

ajax调用不在外部js文件中工作

2 个答案: