Question

目前我有一个登录表单会将JSON数据（用户名和密码）发送到我的api服务器，服务器会将JSON数据（用户名和余额）发回给我的网页。

我的HTML代码：

<input type="text" name="username" id="username" class="text" maxlength="30" />
<br />
<input type="password" name="password" id="password" class="text" maxlength="30" />
<br />
<input type="submit" name="btnSubmit" id="btnSubmit" />

我的jQuery脚本：

    $(document).ready(function () {
    $("#btnSubmit").click(function () {
        //collect userName and password entered by users
        var userName = $("#username").val();
        var password = $("#password").val();

        auth(userName, password);
    });
});

//authenticate function to make ajax call
function auth(userName, password) {
    $.ajax
    ({
        type: "POST",
        //SEND TO MY SERVER URL
        url: "http:myserverlocationurl.com",
        dataType: 'json',
        async: false,
        data: '{"userName": "' + userName + '", "password" : "' + password + '"}',
        success: function () {

            //???????????????????????
        }
    })
}

我的问题与'??????????'有关以上所列。如何封装/显示从服务器发回的json数据并将其显示在我的网页上（作为弹出窗口 - 但只要我能看到它，ANYTHING就会起作用。）

谢谢你，非常感谢任何帮助。

Answer 1

$.ajax
({
    type: "POST",
    //SEND TO MY SERVER URL
    url: "http:myserverlocationurl.com",
    dataType: 'json',
    async: false,
    data: '{"userName": "' + userName + '", "password" : "' + password + '"}',
    success: function (jsonResponse) {

        resp = parseJSON(jsonResponse);

        alert(resp);
    }
})

Answer 2

成功函数附带三个参数，data，textStatus和jqXHR，jQuery API site中说明了这些参数：

成功

类型：Function（PlainObject数据，String textStatus，jqXHR   jqXHR）请求成功时调用的函数。功能   传递三个参数：从服务器返回的数据，   根据dataType参数格式化;一个字符串描述   状态;和jqXHR（在jQuery 1.4.x，XMLHttpRequest）对象。作为   jQuery 1.5，成功设置可以接受一系列函数。每   函数将依次调用。这是一个Ajax事件。

要查看ajax调用的结果，可以使用console.log（）查看参数的内容：

    success: function (data, textStatus, jqXHR) {
          console.log(data);
          console.log(textStatus);
          console.log(jqXHR);
    }

要将JSON响应的内容添加到您的站点，这取决于它的格式。如果您的回复返回的内容如下：{"user": "jsmith", "authentication": "success"}，则可以提醒用户：

    success: function (data, textStatus, jqXHR) {
          alert('User: ' + data.user + ' authenticated:' + data.authentication);
    }

或者将其添加到您网页上的某些DOM元素，即ID为login-status的div：

    success: function (data, textStatus, jqXHR) {
          $('#login-status').html('User: ' + data.user + ' authenticated:' + data.authentication);
    }

Answer 3

dtpicker

您只需提醒自己的数据即可查看。

使用Jquery和Json登录身份验证

3 个答案: