jQuery实现Ajax通讯的几种常用方式

最新推荐文章于 2024-09-26 19:23:55 发布

逸川先生

最新推荐文章于 2024-09-26 19:23:55 发布

阅读量1.4k

点赞数 1

分类专栏：前端学习笔记 Java-我的大学生涯文章标签： jQuery get post ajax

本文链接：https://blog.csdn.net/qq_38238041/article/details/83065459

版权

Java-我的大学生涯同时被 2 个专栏收录

49 篇文章 3 订阅

订阅专栏

前端学习笔记

20 篇文章 1 订阅

订阅专栏

这里介绍3种

jQuery.get( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] )

jQuery.post( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] )

jQuery.ajax( url, [ settings ] )

第三种是我最常用的，看个人习惯了，其实都OK

第一种不支持中文，要用中文就得转码，用中文一般用post，也就是第二种，表单提交也一般使用post；第三种可以理解为前面两种的一个综合。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
	<!-- ajax演示 -->
	<script type="text/javascript" src="<c:url value='/js/jquery-3.3.1.js'/>"></script>
	<script type="text/javascript">
		/* get方式 */
		function get(){
			var url = "<c:url value='/GetServlet'/>";
			$.get(
				url,
				{
					name:"jack",
					age:"23"
				},
				function(data, textStatus, jqXHR){
					alert(data);
				}
			);
		}
		/* post方式 */
		function post() {
			var url = "<c:url value='/GetServlet'/>";
			$.post(
				url,
				{
					name:"中文",
					age:"23"
				},
				function (data){
					alert(data);
				}
			);
		}
		/* Ajax */
		$(function(){
			$("#ajax").click(function () {
				$.ajax({
					url:"<c:url value='/GetServlet'/>",
					data:{
						name:"老干爹",
						age:"55"
					},
					type:"POST",
					dataType:"JSON",
					success: function(data){
						alert(data.name+","+data.age);
					},
					error: function(){
						alert("出错啦");
					}
				});
			});
		});
	</script>
</head>
<body>
	<button onclick="get()">get方式访问后台</button><hr>
	
	<button onclick="post()">post方式访问后台</button><hr>
	
	<input type="button" value="ajax方式" id="ajax"/>
		
</body>
</html>

servlet代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
	<!-- ajax演示 -->
	<script type="text/javascript" src="<c:url value='/js/jquery-3.3.1.js'/>"></script>
	<script type="text/javascript">
		/* get方式 */
		function get(){
			var url = "<c:url value='/GetServlet'/>";
			$.get(
				url,
				{
					name:"jack",
					age:"23"
				},
				function(data, textStatus, jqXHR){
					alert(data);
				}
			);
		}
		/* post方式 */
		function post() {
			var url = "<c:url value='/GetServlet'/>";
			$.post(
				url,
				{
					name:"中文",
					age:"23"
				},
				function (data){
					alert(data);
				}
			);
		}
		/* Ajax */
		$(function(){
			$("#ajax").click(function () {
				$.ajax({
					url:"<c:url value='/GetServlet'/>",
					data:{
						name:"老干爹",
						age:"55"
					},
					type:"POST",
					dataType:"JSON",
					success: function(data){
						alert(data.name+","+data.age);
					},
					error: function(){
						alert("出错啦");
					}
				});
			});
		});
	</script>
</head>
<body>
	<button onclick="get()">get方式访问后台</button><hr>
	
	<button onclick="post()">post方式访问后台</button><hr>
	
	<input type="button" value="ajax方式" id="ajax"/>
		
</body>
</html>

///--以下为补充内容--//

1. w3s的在线jQuery中文文档：http://www.w3school.com.cn/jquery/jquery_reference.asp

2. jquery中文网：https://www.jquery123.com/

3.jquery官网：https://jquery.com/

4.jQuery离线手册、源码：https://download.csdn.net/download/qq_38238041/10720563