[JavaScript知识库] 基于JQ的ajax使用

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 基于JQ的ajax使用 -> 正文阅读

[JavaScript知识库]基于JQ的ajax使用

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>