使用ajax将数据添加到数据库中

时间:2013-12-30 20:55:35

标签: jquery asp.net ajax

我有一个包含3个输入字段的页面。在检查密码是否匹配后,按提交按钮应该将这些字段的内容提交到数据库,在数据库中将添加该字段。 Javascript如下:

        var ajReq = new XMLHttpRequest();

    $(document).ready(function () {
        $('#btnRegister').on('click', function () {
            if ($('#pass1').val() != $('#pass2').val()) {
                alert('confirm your password');
                return false;
            } else {
                $.ajax({
                    type: "POST",
                    url: "../Services/Page.asmx/Add",
                    data: JSON.stringify({ name: $('#name').val(), secondname: $('#secondname').val(), Password: $('#pass1').val() }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        alert("Added");
                    }
                });
            }
        });
    });
        [WebMethod]
    public void Add(string name, string secondname, string password)
    {

        try
        {
            util.Add(name, secondname, password);
        }
        catch ()
        {
        }
    }
但是,我发现,当我运行页面并点击提交时,没有任何反应。谁能告诉我我做错了什么?

此外,在网址之后,我有类似../../service....的内容 - 这两个点后跟斜线后跟两个点是什么意思?
这是我如何调用名称输入字段:

            <input id="name" type="text" class="form-control" required="" />

1 个答案:

答案 0 :(得分:1)

使用

$('#btnRegister').on('click', function (e) {
    e.preventDefault();
    if ($('#pass1').val() != $('#pass2').val())
    {
        alert('confirm your password');
    }
    else
    {
        $.ajax({
            type: "POST",
            url: "../../Services/Page.asmx/Add",
            data: JSON.stringify({
                name: $('#name').val(),
                secondname: $('#secondname').val(),
                Password: $('#pass1').val()
            }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                alert("Added");
            }
        });
    }
});

防止默认表单提交到服务器。返回虚假;也错了,在那里没用。这样,您可以在将数据发送到服务器以进行进一步处理之前运行所有前端验证,并且../../somefile是此脚本运行的文件夹中的两个文件夹。 这是我的文件夹的结构:

Project-> 
    Login-> 
      -Login.aspx -- this is where my ajax script is located 
    Services -> 
      -Page.asmx -- this is where my add method is located 
    App_Start -- other folders  
    Image -- other folders 
    Script -- other folder.