Ajax usage based on JQ

get request - pure

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 request - Submission parameters （ Splicing ）

/**
			 * 2. Submission parameters （ Splicing ）
			 *  Interface for ：http://localhost:8080/axiostest/get
			 *  Parameter is id:123,name: Climb 
			 */
			function ajax_getid() {
				$.get("http://localhost:8080/axiostest/get?id=123&&name=' Climb '", function(data, status) {
					console.log(data, status);
				});
			}

get request - Submission parameters （ route ）

/**
			 * 3. Submission parameters （ route ）
			 *  Interface for ：http://localhost:8080/axiostest/get
			 *  Parameter is ：456
			 */
			function ajax_getid_lj() {
				$.ajax({
					url: "http://localhost:8080/axiostest/get/456",
					type: "GET",
					cache: false,
					dataType: "json", // Represents the return value type , No need 
					success: function(data) {
						console.log(data);
					}
				});
			}

get request - Full version

/**
			 * 4. Submission parameters （ Splicing ）, amount to 2
			 *  Interface for ：http://localhost:8080/axiostest/get
			 *  Parameter is id:2,name: Dudu Dudu 
			 */
			function ajax_getparm() {
				$.ajax({
					url: "http://localhost:8080/axiostest/get",
					type: "GET",
					cache: false,
					data: {
						id: 2,
						name: " Dudu Dudu "

					},
					dataType: "json", // Represents the return value type , No need 
					success: function(data) {
						console.log(data);
					},
					error: function(jqxhr, textStatus, error) {
						console.log(jqxhr, );
						console.log(textStatus);
						console.log(error);

					}
				})
			}

get request - Submit form data

<form  >
			<label> user name :</label>
			<input type="text" name="title"  value="11111111111"    autocomplete="off" placeholder=" Please enter a title " class="layui-input"><br>
			<label> password :</label>
			<input type="password" name="password"  value="22222222" placeholder=" Please input a password " autocomplete="off" class="layui-input"><br>
			<label> Selectors : <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    Output string -->
			<!-- [{…}, {…}, {…}]  The output array   object  -->
			<label> Gender :</label>
			<label> male :<input type="radio" name="sex" value="0" title=" male " checked="checked"></label>
			<label> Woman :<input type="radio" name="sex" value="1" title=" Woman "></label> <br>
			<!-- title=&password= & interest=1 & sex=0  -->
			<label> like :</label>
			<label> writing :<input type="checkbox" name="like1" value="0" lay-skin="primary" title=" writing " checked=""></label>
			<label> read :<input type="checkbox" name="like1" value="1" lay-skin="primary" title=" read "></label>
			<label> game :<input type="checkbox" name="like1" value="2" lay-skin="primary" title=" game "
					disabled=""></label><br>
			<input type="button" value=" submit form" onclick='dijiao_form()' />
				 
		</form>
----------------------------------------------------------------
/**
			 *  Submit form data 
			 */
			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,  // The focus must be a variable such as ：data
				     // dataType:'json', 
				     success:function(data){      
				        console.log(data);
				     },
				     error:function(data){ 
				     console.log(data);
				     }
				    })
			}

get request - Full version

<!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. pure get request 
			 */
			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. Submission parameters （ Splicing ）
			 *  Interface for ：http://localhost:8080/axiostest/get
			 *  Parameter is id:123,name: Climb 
			 */
			function ajax_getid() {
				$.get("http://localhost:8080/axiostest/get?id=123&&name=' Climb '", function(data, status) {
					console.log(data, status);
				});
			}

			/**
			 * 4. Submission parameters （ Splicing ）, amount to 2
			 *  Interface for ：http://localhost:8080/axiostest/get
			 *  Parameter is id:2,name: Dudu Dudu 
			 */
			function ajax_getparm() {
				$.ajax({
					url: "http://localhost:8080/axiostest/get",
					type: "GET",
					cache: false,
					data: {
						id: 2,
						name: " Dudu Dudu "

					},
					dataType: "json", // Represents the return value type , No need 
					success: function(data) {
						console.log(data);
					},
					error: function(jqxhr, textStatus, error) {
						console.log(jqxhr, );
						console.log(textStatus);
						console.log(error);

					}
				})
			}
			/**
			 * 3. Submission parameters （ route ）
			 *  Interface for ：http://localhost:8080/axiostest/get
			 *  Parameter is ：456
			 */
			function ajax_getid_lj() {
				$.ajax({
					url: "http://localhost:8080/axiostest/get/456",
					type: "GET",
					cache: false,
					dataType: "json", // Represents the return value type , No need 
					success: function(data) {
						console.log(data);
					}
				});
			}
			// ajax_get()
			// ajax_getid()
			// ajax_getparm()
			// ajax_getid_lj()
			
			/**
			 *  Submit form data 
			 */
			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,  // The focus must be a variable such as ：data
				     // dataType:'json', 
				     success:function(data){      
				        console.log(data);
				     },
				     error:function(data){ 
				     console.log(data);
				     }
				    })
			}
			
			 
			
			
		</script>
	</head>
	<body>
		<form  >
			<label> user name :</label>
			<input type="text" name="title"  value="11111111111"    autocomplete="off" placeholder=" Please enter a title " class="layui-input"><br>
			<label> password :</label>
			<input type="password" name="password"  value="22222222" placeholder=" Please input a password " autocomplete="off" class="layui-input"><br>
			<label> Selectors : <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    Output string -->
			<!-- [{…}, {…}, {…}]  The output array   object  -->
			<label> Gender :</label>
			<label> male :<input type="radio" name="sex" value="0" title=" male " checked="checked"></label>
			<label> Woman :<input type="radio" name="sex" value="1" title=" Woman "></label> <br>
			<!-- title=&password= & interest=1 & sex=0  -->
			<label> like :</label>
			<label> writing :<input type="checkbox" name="like1" value="0" lay-skin="primary" title=" writing " checked=""></label>
			<label> read :<input type="checkbox" name="like1" value="1" lay-skin="primary" title=" read "></label>
			<label> game :<input type="checkbox" name="like1" value="2" lay-skin="primary" title=" game "
					disabled=""></label><br>
			<input type="button" value=" submit form" onclick='dijiao_form()' />
				 
		</form>
		
		
		
	</body>
</html>

post request - pure

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

post request - Submission parameters

/**
			 * 2. Submission parameters （ Splicing / Forms ）
			 *  Interface for ：http://localhost:8080/axiostest/postone
			 *  Parameter is id:123 
			 */
			function ajax_postone() {
				$.post("http://localhost:8080/axiostest/postone?id=123", function(data, status) {
					console.log(data);
				});
			}

post request - Submit multiple parameters

/**
			 * 3. Submit multiple parameters （ Splicing / Forms ）
			 *  Interface for ：http://localhost:8080/axiostest/postall
			 *  Parameter is id:123,name: Climb 
			 */
			function ajax_postall() {
				$.post("http://localhost:8080/axiostest/postall?id=123&&name=' Climb '", function(data, status) {
					console.log(data);
				});
			}

post request - Submission parameters （ route ）

	/**
			 * 5. Submission parameters （ route ）
			 *  Interface for ：http://localhost:8080/axiostest/post
			 *  Parameter is ：456
			 */
			function ajax_postid_lj() {
				$.ajax({
					url: "http://localhost:8080/axiostest/post/456",
					type: "post",
					cache: false,
					// dataType: "json", // Represents the return value type , No need 
					success: function(data) {
						console.log(data);
					}
				});
			}

post request - Submit a complete version of the parameters

/**
			 * 4. Submission parameters （ Splicing ）, amount to 3
			 *  Interface for ：http://localhost:8080/axiostest/get
			 *  Parameter is id:2,name: Dudu Dudu 
			 */
			function ajax_postparm() {
				$.ajax({
					url: "http://localhost:8080/axiostest/postall",
					type: "post",
					cache: false,
					data: {
						id: 2,
						name: " Dudu Dudu "

					},
					// dataType: "json", // Represents the return value type , No need 
					success: function(data) {
						console.log(data);
					},
					error: function(jqxhr, textStatus, error) {
						console.log(jqxhr, );
						console.log(textStatus);
						console.log(error);

					}
				})
			}

post request -- Submit form data

<input type="button" value="1.JQ pure POST request " onclick='ajax_post()' />
		<input type="button" value="2.JQ post Submit a single parameter （ Splicing / Forms ）" onclick='ajax_postone()' />
		<input type="button" value="3.JQ post Submit multiple parameters （ Splicing / Forms ）" onclick='ajax_postall()' />
		<input type="button" value="4.AJAX post Submit multiple parameters （ Splicing / Forms ）" onclick='ajax_postparm()' />
		<input type="button" value="5.AJAX post Submission parameters （ route ）" onclick='ajax_postid_lj()' />



		<form method="post">
			<label> user name :</label>
			<input type="text" name="username" value="11111111111" autocomplete="off" placeholder=" Please enter a title "
				class="layui-input"><br>
			<label> password :</label>
			<input type="password" name="pwd" value="22222222" placeholder=" Please input a password " autocomplete="off"
				class="layui-input"><br>
			<label> Selectors : <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    Output string -->
			<!-- [{…}, {…}, {…}]  The output array   object  -->
			<label> Gender :</label>
			<label> male :<input type="radio" name="sex" value="0" title=" male " checked="checked"></label>
			<label> Woman :<input type="radio" name="sex" value="1" title=" Woman "></label> <br>
			<!-- title=&password= & interest=1 & sex=0  -->
			<label> like :</label>
			<label> writing :<input type="checkbox" name="like1" value="0" lay-skin="primary" title=" writing " checked=""></label>
			<label> read :<input type="checkbox" name="like1" value="1" lay-skin="primary" title=" read "></label>
			<label> game :<input type="checkbox" name="like1" value="2" lay-skin="primary" title=" game "></label><br>
			<input type="button" value="6.AJAX post submit form" onclick='dijiao_form()' />
			<input type="button" value="7.AJAX post submit json" onclick='dijiao_json()' />
		</form>



-----------------------------------------------
/**
			 * 6. Submit order adjustment data 
			 */
			function dijiao_form() {
				/**
				 *  Calibration framework  validate
				 */
				 $("form").validate({
				            rules: {
				                username: {
				                    required: true,// call method Method , Limit is required 
				                    minlength: 2,
				                    maxlength: 10
				                }
				            },//rules The rules , among  “username” To be and input In the form name Property has the same value 
				            messages: {
				                username: {
				                    required: ' Please enter a user name ',
				                    minlength: ' User name cannot be less than 2 Characters ',
				                    maxlength: ' The user name cannot exceed 10 Characters ',
				                    remote: ' The username does not exist '
				                }
				             }//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, // The focus must be a variable such as ：data
					dataType: 'json',
					success: function(data) {
						console.log(data);
					},
					error: function(data) {
						console.log(data);
					}
				})
			}

			/**
			 * 7. submit json data 
			 */
			function dijiao_json() {
				var fields = $("form").serializeArray();
				var data = {}; // Declare an object 
				$.each(fields, function(index, field) {
					data[field.name] = field.value; // Through the variable , Set property values , Properties are put together in the object 
				})
				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), // The focus must be a variable such as ：data
					dataType: 'json',
					success: function(data) {
						console.log(data);
					},
					error: function(data) {
						console.log(data);
					}
				})
			}

post request -- Complete code

<!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. pure post request 
			 */
			function ajax_post() {
				$.post("http://localhost:8080/axiostest/post", function(data, status) {
					console.log(data);
				});
			}
			/**
			 * 2. Submission parameters （ Splicing / Forms ）
			 *  Interface for ：http://localhost:8080/axiostest/postone
			 *  Parameter is id:123 
			 */
			function ajax_postone() {
				$.post("http://localhost:8080/axiostest/postone?id=123", function(data, status) {
					console.log(data);
				});
			}
			/**
			 * 3. Submit multiple parameters （ Splicing / Forms ）
			 *  Interface for ：http://localhost:8080/axiostest/postall
			 *  Parameter is id:123,name: Climb 
			 */
			function ajax_postall() {
				$.post("http://localhost:8080/axiostest/postall?id=123&&name=' Climb '", function(data, status) {
					console.log(data);
				});
			}
			/**
			 * 4. Submission parameters （ Splicing ）, amount to 3
			 *  Interface for ：http://localhost:8080/axiostest/get
			 *  Parameter is id:2,name: Dudu Dudu 
			 */
			function ajax_postparm() {
				$.ajax({
					url: "http://localhost:8080/axiostest/postall",
					type: "post",
					cache: false,
					data: {
						id: 2,
						name: " Dudu Dudu "

					},
					// dataType: "json", // Represents the return value type , No need 
					success: function(data) {
						console.log(data);
					},
					error: function(jqxhr, textStatus, error) {
						console.log(jqxhr, );
						console.log(textStatus);
						console.log(error);

					}
				})
			}
			/**
			 * 5. Submission parameters （ route ）
			 *  Interface for ：http://localhost:8080/axiostest/post
			 *  Parameter is ：456
			 */
			function ajax_postid_lj() {
				$.ajax({
					url: "http://localhost:8080/axiostest/post/456",
					type: "post",
					cache: false,
					// dataType: "json", // Represents the return value type , No need 
					success: function(data) {
						console.log(data);
					}
				});
			}

			/**
			 * 6. Submit order adjustment data 
			 */
			function dijiao_form() {
				/**
				 *  Calibration framework  validate
				 */
				 $("form").validate({
				            rules: {
				                username: {
				                    required: true,// call method Method , Limit is required 
				                    minlength: 2,
				                    maxlength: 10
				                }
				            },//rules The rules , among  “username” To be and input In the form name Property has the same value 
				            messages: {
				                username: {
				                    required: ' Please enter a user name ',
				                    minlength: ' User name cannot be less than 2 Characters ',
				                    maxlength: ' The user name cannot exceed 10 Characters ',
				                    remote: ' The username does not exist '
				                }
				             }//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, // The focus must be a variable such as ：data
					dataType: 'json',
					success: function(data) {
						console.log(data);
					},
					error: function(data) {
						console.log(data);
					}
				})
			}

			/**
			 * 7. submit json data 
			 */
			function dijiao_json() {
				var fields = $("form").serializeArray();
				var data = {}; // Declare an object 
				$.each(fields, function(index, field) {
					data[field.name] = field.value; // Through the variable , Set property values , Properties are put together in the object 
				})
				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), // The focus must be a variable such as ：data
					dataType: 'json',
					success: function(data) {
						console.log(data);
					},
					error: function(data) {
						console.log(data);
					}
				})
			}
		</script>
	</head>
	<body>
		<input type="button" value="1.JQ pure POST request " onclick='ajax_post()' />
		<input type="button" value="2.JQ post Submit a single parameter （ Splicing / Forms ）" onclick='ajax_postone()' />
		<input type="button" value="3.JQ post Submit multiple parameters （ Splicing / Forms ）" onclick='ajax_postall()' />
		<input type="button" value="4.AJAX post Submit multiple parameters （ Splicing / Forms ）" onclick='ajax_postparm()' />
		<input type="button" value="5.AJAX post Submission parameters （ route ）" onclick='ajax_postid_lj()' />



		<form method="post">
			<label> user name :</label>
			<input type="text" name="username" value="11111111111" autocomplete="off" placeholder=" Please enter a title "
				class="layui-input"><br>
			<label> password :</label>
			<input type="password" name="pwd" value="22222222" placeholder=" Please input a password " autocomplete="off"
				class="layui-input"><br>
			<label> Selectors : <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    Output string -->
			<!-- [{…}, {…}, {…}]  The output array   object  -->
			<label> Gender :</label>
			<label> male :<input type="radio" name="sex" value="0" title=" male " checked="checked"></label>
			<label> Woman :<input type="radio" name="sex" value="1" title=" Woman "></label> <br>
			<!-- title=&password= & interest=1 & sex=0  -->
			<label> like :</label>
			<label> writing :<input type="checkbox" name="like1" value="0" lay-skin="primary" title=" writing " checked=""></label>
			<label> read :<input type="checkbox" name="like1" value="1" lay-skin="primary" title=" read "></label>
			<label> game :<input type="checkbox" name="like1" value="2" lay-skin="primary" title=" game "></label><br>
			<input type="button" value="6.AJAX post submit form" onclick='dijiao_form()' />
			<input type="button" value="7.AJAX post submit json" onclick='dijiao_json()' />
		</form>



	</body>
</html>