无法让 jQuery 和 Web 服务正常运行

Question

我在 ASP.NET WebForms 应用程序中构建了一个简单的 Bootstrap 登录表单，如下所示：

<%@ Page Title="" Language="C#" MasterPageFile="~/Main.master" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript">
    $(document).ready(function () {
        $('#signInBtn').click( function () {
            if ($('#MemberName').val() == "" || $('#Password').val() == "") {
                e.preventDefault();
                return false;
            }

            var $btn = $(this);
            $btn.button('loading');

            var formData = {};
            formData['MemberName'] = $('#MemberName').val();
            formData['Password'] = $('#Password').val();

            var json = JSON.stringify({ Member: formData });
            $.ajax({
                url: "members.asmx/ValidateLogin",
                timeout: 30000,
                type: 'POST',
                data: json,
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    var response = JSON.parse(data.d);
                    alert(response);
                },
                error: function (data, textStatus, jqXHR) {
                    var obj = jQuery.parseJSON(jqXHR.responseText);
                    alert(obj);
                }
            })
        });
    });
</script>
 </asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpMain" Runat="Server">
<div id="frm">
    <div class="form-inline form-group-sm">
        <div class="input-group">
            <label for="MemberName" class="sr-only">Email Address :</label>
            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
            <input type="email" required id="MemberName" placeholder="Email Address" class="form-control">
        </div>
        <div class="input-group">
            <label for="Password" class="sr-only">Password :</label>
            <input type="password" required id="Password" placeholder="Password" class="form-control">
        </div>
        <button id="signInBtn" class="btn-sm btn-primary" autocomplete="off" data-loading-text="Wait...">Login</button>
    </div>
</div>
</asp:Content>

它连接到一个网络服务，代码如下：

using System;
using System.Collections.Generic;
using System.Web.Services;
using System.Web.Script.Services;
using Newtonsoft.Json;
using MCV.Data;


[WebService(Namespace = "http:/myproject.temp.com/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class Members : System.Web.Services.WebService
{

public Members()
{ }

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string ValidateLogin(Member NewMember)
{
    string name = NewMember.MemberName;
    SignInResponse r;
    try
    {
        bool status = MemberDB.SignIn(NewMember.MemberName, NewMember.Password);
        if (status)
            r = new SignInResponse("1", "OK");
        else
            r = new SignInResponse("0", "ERR");
    }
    catch (Exception ex)
    {
        r = new SignInResponse("-1", ex.Message);
    }
    return JsonConvert.SerializeObject(r);
}
}

这不是复杂的代码。 Web 服务只需调用另一个类中的方法来验证用户的电子邮件和密码，并返回一个 JSON 字符串，其中包含一个带有验证结果的自定义类。

问题是，代码静默失败。它没有显示失败，因为 Chrome 控制台没有显示任何错误。我在 Web 服务代码中添加了一个断点以查看它在做什么，但断点从未命中。我不知道错误在哪里，但它让我发疯了。

对此有什么想法吗？

Answer 1

两个问题：

1. 您没有从$.ajax 正确传递NewMember 参数
2. 注意 .asmx 文件的拼写，在您的 javascript 中，您将其称为 members.asmx/ValidateLogin，但在其后面的 C# 代码中称为 Members，并带有大写 M。确保大小写匹配。

我刚刚进行了更改以从 javascript 正确构建 NewMember，并确保我的解决方案中的 .asmx 文件名为 members.asmx，并且它现在可以工作：

$('#signInBtn').click(function () {

    if ($('#MemberName').val() == "" || $('#Password').val() == "") {
        e.preventDefault();
        return false;
    }

    var json = {
        "MemberName": $('#MemberName').val(),
        "Password": $('#Password').val()
    };

    $.ajax({
        url: "members.asmx/ValidateLogin",
        timeout: 30000,
        type: 'POST',
        data: JSON.stringify({ NewMember: json }),
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            var response = JSON.parse(data.d);
            alert(response);
        },
        error: function (data, textStatus, jqXHR) {
            var obj = jQuery.parseJSON(jqXHR.responseText);
            alert(obj);
        }
    })
});