JQuery中Ajax的操作及应用实例
开发工作中，jquery ajax被常常用到，尤其是在无刷新页面完成异步请求的应用上。说明：以下代码仅供学习和研究使用，是为了方便用户测试而提供的样例代码，只是提供一个参考。
我的环境
jQuery v1.11.1
常用参数
url 提交请求的URL，默认当前路径
type 请求的类型（GET 或 POST）
async 是否异步处理。默认是 true。
data 需要提交到服务器的数据
dataType 服务器返回数据的类型，例如xml、json、script、html等
success(result,status,xhr) 请求成功后的回调函数，xhr：XMLHttpRequest
error(xhr,status,error) 请求失败后的回调函数
操作及应用
简单示例
get和post底层也是调用了ajax，只是对其封装了更方便的调用get和post。
ajax 方式
$.ajax({
'url':'user/simple.php',
'type':'post',//get
'data':{},
'dataType':'json',
'success':function(result,status,xhr){
console.log(result);
//Object {data: "测试"}
},
'error':function(xhr,status,error){
console.log('status:'+ status + ' error:' + error);
//错误输出：status:error error:Internal Server Error
}
});post 方式
$.post("user/simple.php",{},function(result,status,xhr){
console.log(result);
//Object {data: "测试"}
},'json').error(function(xhr,status,error){
console.log(status + ' ' + error);
//错误输出：status:error error:Internal Server Error
});get 方式
$.get("user/simple.php",function(result,status,xhr){
console.log(result);
//Object {data: "测试"}
},'json').error(function(xhr,status,error){
console.log(status + ' ' + error);
//错误输出：status:error error:Internal Server Error
});后端 simple.php
<?php
//header('HTTP/1.0 500 Internal Server Error');
//throw new Exception("抛出错误");
die(json_encode(array('data'=>'测试')));XMLHttpRequest
abort: (a)
always: ()
complete: ()
done: ()
error: ()
fail: ()
getAllResponseHeaders: ()
getResponseHeader: (a)
overrideMimeType: (a)
pipe: ()
progress: ()
promise: (a)
readyState: 4
responseJSON: Object
responseText: "{"data":"\u6d4b\u8bd5"}"
setRequestHeader: (a,b)
state: ()
status: 200
statusCode: (a)
statusText: "OK"
success: ()
then: ()
__proto__: Object登录示例
异步登录 ajax login
前端 login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery中Ajax的操作（实例二）- 模拟登陆</title>
<script type="text/Javascript" src="jquery.min.js"></script>
</head>
<body>
<form name="loginForm" action="user/login.php" method="post">
<p><input type="text" name="username" value="" placeholder="请输入账号"/></p>
<p><input type="password" name="password" value="" placeholder="请输入密码"/></p>
<p><input type="button" value="登录"/></p>
</form>
<script type="text/Javascript">
//点击登录按钮触发点击事件
$('input[type=button]').click(function () {
loginSubmit(this);
});
function loginSubmit(_this) {
//提交按钮
var btn = $(_this);
//验证账号
var username = $('input[name=username]').val();
if (username == null || username == '') {
alert("用户名不能为空");
return;
}
//验证密码
var password = $('input[name=password]').val();
if (password == null || password == '') {
alert("密码名不能为空");
return;
}
//form表单
var form = $('form[name=loginForm]');
//异步登录
$.ajax({
'url': 'user/login.php',
'type': 'post',
'data': form.serialize(),//序列化表单
'dataType': 'json',
'beforeSend': function () {
//提交前禁用按钮
btn.attr('disabled', 'disabled');
},
'success': function (result, status, xhr) {
console.log(result);
//什么都不输入点击登录 - 前端不判断空情况
//Object {success: false, message: "账号和密码不能为空", data: null}
//输入用户名或密码错误
//Object {success: false, message: "用户名或密码错误", data: null}
//用户名及密码正确
//Object {success: true, message: null, data: "登录成功"}
if (result.success) {
//登录成功
alert(result.data);
} else {
//登录失败
alert(result.message);
}
//恢复按钮
btn.removeAttr("disabled");
},
'error': function (xhr, status, error) {
//登录异常
console.log('status:' + status + ' error:' + error);
//恢复按钮
btn.removeAttr("disabled");
}
});
}
</script>
</body>
</html>后端 login.php
<?php
//接收数据
$username = $_POST['username'];
$password = $_POST['password'];
//定义返回结果
$result = array('success' => false, 'message' => null, 'data' => null);
//模拟登陆场景
if(empty($username) || empty($password)){
$result['message'] = '账号和密码不能为空';
echo json_encode($result);
exit;
}
//这里简单模拟 - 用户名为admin，密码为123456
//实际需查询数据库，再判断其密码、用户状态和密码md5等判断操作
if($username!="admin" || $password!="123456"){
$result['message'] = '用户名或密码错误';
echo json_encode($result);
exit;
}
$result['success'] = true;
$result['data'] = '登录成功';
echo json_encode($result);
exit;原创文章，转载请注明出处：https://www.weizhixi.com/article/17.html