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>