javascript 使用 Jquery 和 Json 登录认证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21263753/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Log in authentication using Jquery and Json
提问by user3196499
Currently I have a login form that will send JSON data (username and password) to my api server and the server will send back JSON data (username and balance) back to my webpage.
目前我有一个登录表单，它将 JSON 数据（用户名和密码）发送到我的 api 服务器，服务器将 JSON 数据（用户名和余额）发送回我的网页。
My HTML Code:
我的 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" />
My jQuery Script:
我的 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 () {
//???????????????????????
}
})
}
My question has to do with the '??????????' listed above. How do I encapsulate/display the json data that is being sent back from the server and onto my webpage (either as a popup -- but ANYTHING would work as long as I can see it).
我的问题与“??????????”有关 以上所列。我如何封装/显示从服务器发回并显示在我的网页上的 json 数据（作为弹出窗口 - 但只要我能看到它，任何东西都可以工作）。
Thank you and any help would be much appreciated.
谢谢你，任何帮助将不胜感激。
回答by Gjohn
$.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);
}
})
回答by gauravmuk
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));
}
})
}
You can simply alert the data for your self to see it.
您可以简单地提醒您自己查看数据。
回答by rafiki_rafi
The success function comes with three parameters, data, textStatus, and jqXHRwhich are explained in the jQuery API site:
成功函数带有三个参数 , data,textStatus和jQuery API 站点jqXHR中的解释：
success
Type: Function( PlainObject data, String textStatus, jqXHR jqXHR ) A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter; a string describing the status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object. As of jQuery 1.5, the success setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event.
成功
类型：Function(PlainObject data, String textStatus, jqXHR jqXHR) 请求成功时调用的函数。该函数传递三个参数： 从服务器返回的数据，根据 dataType 参数格式化；描述状态的字符串；和 jqXHR（在 jQuery 1.4.x 中，XMLHttpRequest）对象。从 jQuery 1.5 开始，成功设置可以接受函数数组。每个函数都会被依次调用。这是一个 Ajax 事件。
To see the results from the ajax call, you can use console.log() to view the contents of the arguments:
要查看 ajax 调用的结果，可以使用 console.log() 查看参数的内容：
success: function (data, textStatus, jqXHR) {
console.log(data);
console.log(textStatus);
console.log(jqXHR);
}
To add the contents of the JSON response to your site - it depends on how it is formatted. If your response returns something like: {"user": "jsmith", "authentication": "success"}, then you can alert the user:
要将 JSON 响应的内容添加到您的站点 - 这取决于它的格式。如果您的响应返回类似：{"user": "jsmith", "authentication": "success"}，那么您可以提醒用户：
success: function (data, textStatus, jqXHR) {
alert('User: ' + data.user + ' authenticated:' + data.authentication);
}
Or add it to some DOM element on your page, i.e. a div with an id of login-status:
或者将它添加到页面上的某个 DOM 元素，即一个 id 为 的 div login-status：
success: function (data, textStatus, jqXHR) {
$('#login-status').html('User: ' + data.user + ' authenticated:' + data.authentication);
}
