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

这里介绍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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值