基于JQ的ajax使用

智江鹏

已于 2022-05-12 13:55:35 修改

阅读量498

点赞数

分类专栏：前端文章标签： ajax

于 2022-04-27 12:20:25 首次发布

本文链接：https://blog.csdn.net/zxc472504515/article/details/124447928

版权

前端专栏收录该内容

36 篇文章 3 订阅

订阅专栏

在jQuery中AJAX的写法有3种，$ajax，$post，$get这三种。其中$post和$get是简易写法，高层的实现，在调用他们的时候，会运行底层封装好的$ajax。

引入

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

参数解释

1.async ：布尔值，表示请求是否异步处理。默认是 true
2.contentType ：发送数据到服务器时所使用的内容类型。默认是： “application/x-www-form-urlencoded”。
3.data：规定要发送到服务器的数据，可以是：string，数组，多数是 json
4.url：规定发送请求的 URL。
5.type：规定请求的类型（GET 或 POST 等），默认是 GET， get，post 不用区分大小写
6.dataType：期望从服务器响应的数据类型。jQuery 从 xml, json, text, html 这些中测试最可能的类型
“xml” - 一个 XML 文档
“html” - HTML 作为纯文本
“text” - 纯文本字符串
“json” - 以 JSON 运行响应，并以对象返回
7.error(xhr,status,error)：如果请求失败要运行的函数, 其中 xhr, status, error 是自定义的形参名
8.success(result,status,xhr)：当请求成功时运行的函数，其中 result, status, xhr 是自定义的形参名

$.ajax({
    url:"http://www.microsoft.com",    //请求的url地址
    dataType:"json",   //返回格式为json
    async:true,//请求是否异步，默认为异步，这也是ajax重要特性
    data:{"id":"value"},    //参数值
    type:"GET",   //请求方式
    beforeSend:function(data){
        //请求前的处理
    },
    success:function(req){
        //请求成功时处理
    },
    complete:function(data){
        //请求完成的处理
    },
    error:function(data){
        //请求出错处理
    }
});

get请求-单纯的

function ajax_get() {
				$.get("http://localhost:8080/axiostest/get0", function(data, status) {
					console.log(data, status);
				});
			}
			
			
			
			function ajax_get2() {
				$.get("http://www.liulongbin.top:3006/api/getbooks", function(data, status) {
					console.log(data, status);
				});
			}
			// ajax_get2();
			
			function ajax_get4() {
				$.get("http://www.liulongbin.top:3006/api/getbooks", {id:2},function(data, status) {
					console.log(data, status);
				});
			}

get请求-递交参数（拼接）

/**
			 * 2.递交参数（拼接）
			 * 接口为：http://localhost:8080/axiostest/get
			 * 参数为id:123,name:爬爬
			 */
			function ajax_getid() {
				$.get("http://localhost:8080/axiostest/get?id=123&&name='爬爬'", function(data, status) {
					console.log(data, status);
				});
			}

get请求-递交参数（路径）

/**
			 * 3.递交参数（路径）
			 * 接口为：http://localhost:8080/axiostest/get
			 * 参数为：456
			 */
			function ajax_getid_lj() {
				$.ajax({
					url: "http://localhost:8080/axiostest/get/456",
					type: "GET",
					cache: false,
					dataType: "json", //表示返回值类型，不必须
					success: function(data) {
						console.log(data);
					}
				});
			}

get请求-完整版

/**
			 * 4.递交参数（拼接）,相当于2
			 * 接口为：http://localhost:8080/axiostest/get
			 * 参数为id:2,name:嘟嘟嘟嘟
			 */
			function ajax_getparm() {
				$.ajax({
					url: "http://localhost:8080/axiostest/get",
					type: "GET",
					cache: false,
					data: {
						id: 2,
						name: "嘟嘟嘟嘟"

					},
					dataType: "json", //表示返回值类型，不必须
					success: function(data) {
						console.log(data);
					},
					error: function(jqxhr, textStatus, error) {
						console.log(jqxhr, );
						console.log(textStatus);
						console.log(error);

					}
				})
			}

get请求-递交表单数据

<form  >
			<label>用户名:</label>
			<input type="text" name="title"  value="11111111111"    autocomplete="off" placeholder="请输入标题" class="layui-input"><br>
			<label>密码:</label>
			<input type="password" name="password"  value="22222222" placeholder="请输入密码" autocomplete="off" class="layui-input"><br>
			<label>选择器: <select name="interest"><br>
					<option value="">---</option>
					<option value="0">000</option>
					<option value="1" selected="selected">111</option>
					<option value="2">222</option>
					<option value="3">333</option>
					<option value="4">444</option>
				</select></label><br>
			<!--//title= amdin & password= admin888 & interest= 4   输出字符串-->
			<!-- [{…}, {…}, {…}] 输出数组 对象 -->
			<label>性别:</label>
			<label>男:<input type="radio" name="sex" value="0" title="男" checked="checked"></label>
			<label>女:<input type="radio" name="sex" value="1" title="女"></label> <br>
			<!-- title=&password= & interest=1 & sex=0  -->
			<label>喜好:</label>
			<label>写作:<input type="checkbox" name="like1" value="0" lay-skin="primary" title="写作" checked=""></label>
			<label>阅读:<input type="checkbox" name="like1" value="1" lay-skin="primary" title="阅读"></label>
			<label>游戏:<input type="checkbox" name="like1" value="2" lay-skin="primary" title="游戏"
					disabled=""></label><br>
			<input type="button" value="递交form" onclick='dijiao_form()' />
				 
		</form>
----------------------------------------------------------------
/**
			 * 递交表单数据
			 */
			function dijiao_form() {
				var data=$("form").serialize();
				var targetUrl='http://localhost:8080/axiostest/get' 
				console.log(data);
				  $.ajax({ 
				     type:'get',  
				     url:targetUrl, 
				     cache: false,
				     data:data,  //重点必须为一个变量如：data
				     // dataType:'json', 
				     success:function(data){      
				        console.log(data);
				     },
				     error:function(data){ 
				     console.log(data);
				     }
				    })
			}

get请求-完整版本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">
			/**
			 * 1.单纯的get请求
			 */
			function ajax_get() {
				$.get("http://localhost:8080/axiostest/get0", function(data, status) {
					console.log(data, status);
				});
			}
			
			
			
			function ajax_get2() {
				$.get("http://www.liulongbin.top:3006/api/getbooks", function(data, status) {
					console.log(data, status);
				});
			}
			// ajax_get2();
			
			function ajax_get4() {
				$.get("http://www.liulongbin.top:3006/api/getbooks", {id:2},function(data, status) {
					console.log(data, status);
				});
			}
			ajax_get4();
			
			
			
			
			
			
			
			
			
			
			
			
			/**
			 * 2.递交参数（拼接）
			 * 接口为：http://localhost:8080/axiostest/get
			 * 参数为id:123,name:爬爬
			 */
			function ajax_getid() {
				$.get("http://localhost:8080/axiostest/get?id=123&&name='爬爬'", function(data, status) {
					console.log(data, status);
				});
			}

			/**
			 * 4.递交参数（拼接）,相当于2
			 * 接口为：http://localhost:8080/axiostest/get
			 * 参数为id:2,name:嘟嘟嘟嘟
			 */
			function ajax_getparm() {
				$.ajax({
					url: "http://localhost:8080/axiostest/get",
					type: "GET",
					cache: false,
					data: {
						id: 2,
						name: "嘟嘟嘟嘟"

					},
					dataType: "json", //表示返回值类型，不必须
					success: function(data) {
						console.log(data);
					},
					error: function(jqxhr, textStatus, error) {
						console.log(jqxhr, );
						console.log(textStatus);
						console.log(error);

					}
				})
			}
			/**
			 * 3.递交参数（路径）
			 * 接口为：http://localhost:8080/axiostest/get
			 * 参数为：456
			 */
			function ajax_getid_lj() {
				$.ajax({
					url: "http://localhost:8080/axiostest/get/456",
					type: "GET",
					cache: false,
					dataType: "json", //表示返回值类型，不必须
					success: function(data) {
						console.log(data);
					}
				});
			}
			// ajax_get()
			// ajax_getid()
			// ajax_getparm()
			// ajax_getid_lj()
			
			/**
			 * 递交表单数据
			 */
			function dijiao_form() {
				var data=$("form").serialize();
				var targetUrl='http://localhost:8080/axiostest/get' 
				console.log(data);
				  $.ajax({ 
				     type:'get',  
				     url:targetUrl, 
				     cache: false,
				     data:data,  //重点必须为一个变量如：data
				     // dataType:'json', 
				     success:function(data){      
				        console.log(data);
				     },
				     error:function(data){ 
				     console.log(data);
				     }
				    })
			}
			
			 
			
			
		</script>
	</head>
	<body>
		<form  >
			<label>用户名:</label>
			<input type="text" name="title"  value="11111111111"    autocomplete="off" placeholder="请输入标题" class="layui-input"><br>
			<label>密码:</label>
			<input type="password" name="password"  value="22222222" placeholder="请输入密码" autocomplete="off" class="layui-input"><br>
			<label>选择器: <select name="interest"><br>
					<option value="">---</option>
					<option value="0">000</option>
					<option value="1" selected="selected">111</option>
					<option value="2">222</option>
					<option value="3">333</option>
					<option value="4">444</option>
				</select></label><br>
			<!--//title= amdin & password= admin888 & interest= 4   输出字符串-->
			<!-- [{…}, {…}, {…}] 输出数组 对象 -->
			<label>性别:</label>
			<label>男:<input type="radio" name="sex" value="0" title="男" checked="checked"></label>
			<label>女:<input type="radio" name="sex" value="1" title="女"></label> <br>
			<!-- title=&password= & interest=1 & sex=0  -->
			<label>喜好:</label>
			<label>写作:<input type="checkbox" name="like1" value="0" lay-skin="primary" title="写作" checked=""></label>
			<label>阅读:<input type="checkbox" name="like1" value="1" lay-skin="primary" title="阅读"></label>
			<label>游戏:<input type="checkbox" name="like1" value="2" lay-skin="primary" title="游戏"
					disabled=""></label><br>
			<input type="button" value="递交form" onclick='dijiao_form()' />
				 
		</form>
		
		
		
	</body>
</html>

post请求-单纯的

	function ajax_post() {
				$.post("http://localhost:8080/axiostest/post", function(data, status) {
					console.log(data);
				});
			}

post请求-递交参数

/**
			 * 2.递交参数（拼接/表单）
			 * 接口为：http://localhost:8080/axiostest/postone
			 * 参数为id:123 
			 */
			function ajax_postone() {
				$.post("http://localhost:8080/axiostest/postone?id=123", function(data, status) {
					console.log(data);
				});
			}

post请求-递交多个参数

/**
			 * 3.递交多个参数（拼接/表单）
			 * 接口为：http://localhost:8080/axiostest/postall
			 * 参数为id:123,name:爬爬
			 */
			function ajax_postall() {
				$.post("http://localhost:8080/axiostest/postall?id=123&&name='爬爬'", function(data, status) {
					console.log(data);
				});
			}

post请求-递交参数（路径）

	/**
			 * 5.递交参数（路径）
			 * 接口为：http://localhost:8080/axiostest/post
			 * 参数为：456
			 */
			function ajax_postid_lj() {
				$.ajax({
					url: "http://localhost:8080/axiostest/post/456",
					type: "post",
					cache: false,
					// dataType: "json", //表示返回值类型，不必须
					success: function(data) {
						console.log(data);
					}
				});
			}

post请求-递交参数完整版

/**
			 * 4.递交参数（拼接）,相当于3
			 * 接口为：http://localhost:8080/axiostest/get
			 * 参数为id:2,name:嘟嘟嘟嘟
			 */
			function ajax_postparm() {
				$.ajax({
					url: "http://localhost:8080/axiostest/postall",
					type: "post",
					cache: false,
					data: {
						id: 2,
						name: "嘟嘟嘟嘟"

					},
					// dataType: "json", //表示返回值类型，不必须
					success: function(data) {
						console.log(data);
					},
					error: function(jqxhr, textStatus, error) {
						console.log(jqxhr, );
						console.log(textStatus);
						console.log(error);

					}
				})
			}

post请求--递交表单数据


<input type="button" value="1.JQ单纯POST请求" onclick='ajax_post()' />
		<input type="button" value="2.JQ post递交单个参数（拼接/表单）" onclick='ajax_postone()' />
		<input type="button" value="3.JQ post递交多个参数（拼接/表单）" onclick='ajax_postall()' />
		<input type="button" value="4.AJAX post递交多个参数（拼接/表单）" onclick='ajax_postparm()' />
		<input type="button" value="5.AJAX post递交参数（路径）" onclick='ajax_postid_lj()' />



		<form method="post">
			<label>用户名:</label>
			<input type="text" name="username" value="11111111111" autocomplete="off" placeholder="请输入标题"
				class="layui-input"><br>
			<label>密码:</label>
			<input type="password" name="pwd" value="22222222" placeholder="请输入密码" autocomplete="off"
				class="layui-input"><br>
			<label>选择器: <select name="interest"><br>
					<option value="">---</option>
					<option value="0">000</option>
					<option value="1" selected="selected">111</option>
					<option value="2">222</option>
					<option value="3">333</option>
					<option value="4">444</option>
				</select></label><br>
			<!--//title= amdin & password= admin888 & interest= 4   输出字符串-->
			<!-- [{…}, {…}, {…}] 输出数组 对象 -->
			<label>性别:</label>
			<label>男:<input type="radio" name="sex" value="0" title="男" checked="checked"></label>
			<label>女:<input type="radio" name="sex" value="1" title="女"></label> <br>
			<!-- title=&password= & interest=1 & sex=0  -->
			<label>喜好:</label>
			<label>写作:<input type="checkbox" name="like1" value="0" lay-skin="primary" title="写作" checked=""></label>
			<label>阅读:<input type="checkbox" name="like1" value="1" lay-skin="primary" title="阅读"></label>
			<label>游戏:<input type="checkbox" name="like1" value="2" lay-skin="primary" title="游戏"></label><br>
			<input type="button" value="6.AJAX post递交form" onclick='dijiao_form()' />
			<input type="button" value="7.AJAX post递交json" onclick='dijiao_json()' />
		</form>



-----------------------------------------------
/**
			 * 6.递交调单数据
			 */
			function dijiao_form() {
				/**
				 * 校验框架 validate
				 */
				 $("form").validate({
				            rules: {
				                username: {
				                    required: true,//调用method方法，限制为必填
				                    minlength: 2,
				                    maxlength: 10
				                }
				            },//rules规则,其中 “username”需和input表单中name属性的值一致
				            messages: {
				                username: {
				                    required: '请输入用户名',
				                    minlength: '用户名不能小于2个字符',
				                    maxlength: '用户名不能超过10个字符',
				                    remote: '用户名不存在'
				                }
				             }//end messages 
				        });
				
				
				
				
				var data = $("form").serialize();
				var targetUrl = 'http://localhost:8080/axiostest/postform'
				console.log(data);
				$.ajax({
					type: 'post',
					url: targetUrl,
					cache: false,
					data: data, //重点必须为一个变量如：data
					dataType: 'json',
					success: function(data) {
						console.log(data);
					},
					error: function(data) {
						console.log(data);
					}
				})
			}

			/**
			 * 7.递交json数据
			 */
			function dijiao_json() {
				var fields = $("form").serializeArray();
				var data = {}; //声明一个对象
				$.each(fields, function(index, field) {
					data[field.name] = field.value; //通过变量，将属性值，属性一起放到对象中
				})
				var targetUrl = 'http://localhost:8080/axiostest/postjson'
				console.log(data);
				$.ajax({
					type: 'post',
					url: targetUrl,
					contentType: "application/json;charset=utf-8",
					cache: false,
					data: JSON.stringify(data), //重点必须为一个变量如：data
					dataType: 'json',
					success: function(data) {
						console.log(data);
					},
					error: function(data) {
						console.log(data);
					}
				})
			}

post请求--完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
     <script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/**
			 * 1.单纯的post请求
			 */
			function ajax_post() {
				$.post("http://localhost:8080/axiostest/post", function(data, status) {
					console.log(data);
				});
			}
			/**
			 * 2.递交参数（拼接/表单）
			 * 接口为：http://localhost:8080/axiostest/postone
			 * 参数为id:123 
			 */
			function ajax_postone() {
				$.post("http://localhost:8080/axiostest/postone?id=123", function(data, status) {
					console.log(data);
				});
			}
			/**
			 * 3.递交多个参数（拼接/表单）
			 * 接口为：http://localhost:8080/axiostest/postall
			 * 参数为id:123,name:爬爬
			 */
			function ajax_postall() {
				$.post("http://localhost:8080/axiostest/postall?id=123&&name='爬爬'", function(data, status) {
					console.log(data);
				});
			}
			/**
			 * 4.递交参数（拼接）,相当于3
			 * 接口为：http://localhost:8080/axiostest/get
			 * 参数为id:2,name:嘟嘟嘟嘟
			 */
			function ajax_postparm() {
				$.ajax({
					url: "http://localhost:8080/axiostest/postall",
					type: "post",
					cache: false,
					data: {
						id: 2,
						name: "嘟嘟嘟嘟"

					},
					// dataType: "json", //表示返回值类型，不必须
					success: function(data) {
						console.log(data);
					},
					error: function(jqxhr, textStatus, error) {
						console.log(jqxhr, );
						console.log(textStatus);
						console.log(error);

					}
				})
			}
			/**
			 * 5.递交参数（路径）
			 * 接口为：http://localhost:8080/axiostest/post
			 * 参数为：456
			 */
			function ajax_postid_lj() {
				$.ajax({
					url: "http://localhost:8080/axiostest/post/456",
					type: "post",
					cache: false,
					// dataType: "json", //表示返回值类型，不必须
					success: function(data) {
						console.log(data);
					}
				});
			}

			/**
			 * 6.递交调单数据
			 */
			function dijiao_form() {
				/**
				 * 校验框架 validate
				 */
				 $("form").validate({
				            rules: {
				                username: {
				                    required: true,//调用method方法，限制为必填
				                    minlength: 2,
				                    maxlength: 10
				                }
				            },//rules规则,其中 “username”需和input表单中name属性的值一致
				            messages: {
				                username: {
				                    required: '请输入用户名',
				                    minlength: '用户名不能小于2个字符',
				                    maxlength: '用户名不能超过10个字符',
				                    remote: '用户名不存在'
				                }
				             }//end messages 
				        });
				
				
				
				
				var data = $("form").serialize();
				var targetUrl = 'http://localhost:8080/axiostest/postform'
				console.log(data);
				$.ajax({
					type: 'post',
					url: targetUrl,
					cache: false,
					data: data, //重点必须为一个变量如：data
					dataType: 'json',
					success: function(data) {
						console.log(data);
					},
					error: function(data) {
						console.log(data);
					}
				})
			}

			/**
			 * 7.递交json数据
			 */
			function dijiao_json() {
				var fields = $("form").serializeArray();
				var data = {}; //声明一个对象
				$.each(fields, function(index, field) {
					data[field.name] = field.value; //通过变量，将属性值，属性一起放到对象中
				})
				var targetUrl = 'http://localhost:8080/axiostest/postjson'
				console.log(data);
				$.ajax({
					type: 'post',
					url: targetUrl,
					contentType: "application/json;charset=utf-8",
					cache: false,
					data: JSON.stringify(data), //重点必须为一个变量如：data
					dataType: 'json',
					success: function(data) {
						console.log(data);
					},
					error: function(data) {
						console.log(data);
					}
				})
			}
		</script>
	</head>
	<body>
		<input type="button" value="1.JQ单纯POST请求" onclick='ajax_post()' />
		<input type="button" value="2.JQ post递交单个参数（拼接/表单）" onclick='ajax_postone()' />
		<input type="button" value="3.JQ post递交多个参数（拼接/表单）" onclick='ajax_postall()' />
		<input type="button" value="4.AJAX post递交多个参数（拼接/表单）" onclick='ajax_postparm()' />
		<input type="button" value="5.AJAX post递交参数（路径）" onclick='ajax_postid_lj()' />



		<form method="post">
			<label>用户名:</label>
			<input type="text" name="username" value="11111111111" autocomplete="off" placeholder="请输入标题"
				class="layui-input"><br>
			<label>密码:</label>
			<input type="password" name="pwd" value="22222222" placeholder="请输入密码" autocomplete="off"
				class="layui-input"><br>
			<label>选择器: <select name="interest"><br>
					<option value="">---</option>
					<option value="0">000</option>
					<option value="1" selected="selected">111</option>
					<option value="2">222</option>
					<option value="3">333</option>
					<option value="4">444</option>
				</select></label><br>
			<!--//title= amdin & password= admin888 & interest= 4   输出字符串-->
			<!-- [{…}, {…}, {…}] 输出数组 对象 -->
			<label>性别:</label>
			<label>男:<input type="radio" name="sex" value="0" title="男" checked="checked"></label>
			<label>女:<input type="radio" name="sex" value="1" title="女"></label> <br>
			<!-- title=&password= & interest=1 & sex=0  -->
			<label>喜好:</label>
			<label>写作:<input type="checkbox" name="like1" value="0" lay-skin="primary" title="写作" checked=""></label>
			<label>阅读:<input type="checkbox" name="like1" value="1" lay-skin="primary" title="阅读"></label>
			<label>游戏:<input type="checkbox" name="like1" value="2" lay-skin="primary" title="游戏"></label><br>
			<input type="button" value="6.AJAX post递交form" onclick='dijiao_form()' />
			<input type="button" value="7.AJAX post递交json" onclick='dijiao_json()' />
		</form>



	</body>
</html>