使用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" />
我的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就会工作）。
谢谢你，任何帮助将不胜感激。
$.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);
}
})
成功函数带有三个参数， data ， textStatus和jqXHR ，它们在jQuery API站点中进行了解释：
成功
类型：函数（PlainObject数据，字符串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元素，即具有login-status ID的div：
success: function (data, textStatus, jqXHR) {
$('#login-status').html('User: ' + data.user + ' authenticated:' + data.authentication);
}
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));
}
})
}
您可以简单地提醒您的数据以查看它。
链接地址: http://www.djcxy.com/p/47835.html