Javascript 使用Jquery和Json登录身份验证

目前，我有一个登录表单，将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" />

我的问题与上面列出的“？？”有关。如何封装/显示从服务器发回的json数据并将其显示到我的网页上（可以作为弹出窗口，但只要我能看到，任何东西都可以工作）

---

非常感谢您的帮助。

成功功能附带三个参数，

数据

，

文本状态

，以及

jqXHR

，这些参数在以下部分中进行了说明：

成功

类型：函数（纯对象数据、字符串textStatus、jqXHR jqXHR）请求成功时要调用的函数。功能 获取传递的三个参数：从服务器返回的数据， 根据数据类型参数进行格式化；描述数据的字符串 地位和jqXHR（在jquery1.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为

登录状态的div

：

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

---

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

取决于响应的外观。。一般来说，您可以通知信息，或者创建包含信息的DOM元素并将其添加到页面中。作为旁注，通过连接字符串来构建json字符串通常不是一个好主意。创建一个javascript对象，然后调用

JSON.stringify（）

，如果需要的话。我能举个例子说明如何做到这一点吗？如何使用stringify（）？我是JSON新手。我也希望我的反应只是简单的警觉。但是我不知道该怎么做：（在这种情况下，我会开始。好的，我一定会检查一下。谢谢。但是你对如何显示来自API服务器的响应json数据有什么建议吗？如果你只关心查看数据，你可以使用浏览器开发工具的网络选项卡，或者使用

console.log（）

在

success

回调中记录响应。我发布的链接的第二部分有一个示例，演示了如何将json写入页面。请记住，您的json结构几乎肯定会与示例不同。感谢您的回复。如果我使用您提到的success函数上面，数据会显示在网页上让用户看到吗？我不认为控制台是必要的，因为我100%确定服务器正在发回JSON数据。我只需要一种方法（通过弹出/警报）在登录网页上显示JSON数据响应。非常感谢。我一定会尝试。如果它的嵌套JSON对象呢？比如：{“info”：{“user”：“balance”：“}，}我会使用：success:function（data，textStatus，jqXHR）{alert（'user:'+data.info.user+'balance:'+data.info.balance）；}我真的很感谢你的帮助。我花了将近5天的时间思考和寻找一个方法。是的，但是如果JSON对象的结构发生变化，那么

data.info.user

和

data.info.balance

将计算为未定义的变量，从而导致

ReferenceError

运行时错误。我敦促你仔细阅读。

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

$.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);
    }
})

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 (response) {
          alert(JSON.stringify(response));
        }
    })
}