jquery的ajax 方法常用属性和回调函数及使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery的ajax 方法常用属性和回调函数及使用示例</title>
</head>
<body>
<!--
ajax 提交form表单
onsubmit="return false"
submit 修改为 button
<input type="button" value="ajax发送" id="ajaxSend" >
-->
<form action="#" method="post" onsubmit="return false" id="ajaxForm">
用户名:<input type="text" id="username" name="username" value="小明"/><br>
密码:<input type="text" id="password" name="password" value="123456"/><br>
验证码:<input type="text" id="verify" name="verify" value="abcd"/><br>
<input type="submit" value="ajax发送" id="ajaxSend">
</form>
<input type="button" id="send" value="send">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#ajaxSend").click(function () {
var username = $("#username").val();
var password = $("#password").val();
var verify = $("#verify").val();
//数组数据
var data = new Array(username, password, verify);
$.ajax({
url: "ajax.php",
//HTTP请求方法 (比如："POST", "GET ", "PUT")
method: "post", //默认get //jquery 1.9+
//method选项的别名
//type:"get", //jquery 1.9-
//从服务器返回你期望的数据类型 xmh html json jsonp text script
dataType: "html",
//发送到服务器的数据
//PlainObject 或 String 或 Array
//1.字符串
//data:"username="+username+"&password="+password+"&verify="+verify,
//2.PlainObject
//data:{username:username,password:password,verify:verify},
//data:{"username":username,password:password,verify:verify},
//3.array 数组
//data:{data:data},
//4.serialize() serializeArray() jquery函数,不是js函数 form表单必须要有 name value
//data:$("#ajaxForm").serialize(),
data: $("#ajaxForm").serializeArray(),
//如果设置为 false ，浏览器将不缓存此页面
cache: false,
//当将数据发送到服务器时，使用该内容类型。
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
// application/x-www-form-urlencoded; charset=UTF-8
// multipart/form-data
// application/json
// text/xml
//设置请求超时时间（毫秒）
timeout: 10000,
/**
* 请求成功后的回调函数
* @param data 从服务器返回的数据
* @param textStatus 状态
* @param xhr XMLHttpRequest对象
*/
success: function (data, textStatus, xhr) {
alert(data);
alert(textStatus);
alert(xhr);
},
/**
* 请求失败时调用此函数
* @param xhr
* @param textStatus
* @param error
*/
error: function (xhr, textStatus, error) {
//alert(xhr); //[object Object]
//alert(textStatus); //error
//alert(error); //Not Found
},
/**
* 请求完成后回调函数 (请求success 和 error之后均调用)
* @param xhr
* @param textStatus "success", "notmodified", "nocontent"，"error", "timeout", "abort","parsererror"
*/
complete: function (xhr, textStatus) {
//alert("请求完成后回调函数");
//alert(xhr);
//alert(textStatus);
},
/**
* 请求发送前的回调函数
* @param xhr [object Object]
* @param setting [object Object]
*/
beforeSend: function (xhr, setting) {
//alert("请求发送前的回调函数"+xhr+setting);
//alert(setting["method"]);
},
})
})
});
//精简
$(function () {
$("#send").click(function () {
var username = "abc";
var password = "123456";
$.ajax({
url: "ajax.php",
method: "post",
dataType: "html",
data: {username: username, password: password},
success: function (data, textStatus, xhr) {
alert(data);
},
error: function (xhr, textStatus, error) {
},
})
})
})
</script>
</body>
</html>
