文章目录

AJAX
- 1.$.ajax() 核心函数
- - 1.1语法
- 2 $.get()
- - 2.1语法
  - 2.2例子
- 3 $.post()
- - 3.1语法
- 4.实战（对比）

AJAX

使用jQuery提供的函数实现Ajax请求的处理。代替直接使用XMLHttpRequest，但是jQuery实际还是使用的异步对象。

jQuery提供多个与AJAX有关的方法。通过jQuery AJAX方法，您能够使用HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML或JSON同时能够把接收的数据更新到DOM对象。

1.$.ajax() 核心函数

$.ajax()是jQuery中AJAX请求的核心方法，所有的其他方法都是在内部使用此方法。

1.1语法

$.ajax({name:value,name:value,....})//json格式的参数
//json格式的参数：key是定义好的，需要开发人员给key赋值。这些key是用来表示Ajax请求必须的参数。

PS:

1.参数是json数据，包含请求方式，数据，回调方法等。

2.json格式的参数：key是定义好的，需要开发人员给key赋值。这些key是用来表示Ajax请求必须的参数。

3.例如：请求的url地址，是不是异步请求，请求的方式等等。

$.ajax({//除了必用的，其他的都可以省略url:"queryProvinceServlet",//必用的。type:"get",data:{"name":"李四","age":20},dataType:"json",success:function(resp){  开发人员获取数据，更新dom对象  },//必用的。error:function(){alert("请求错误")}
})

参数：

url:服务器端的地址，例如某个servlet的访问地址。queryProvinceServlet

type:表示请求方式，get,post。默认是get。这个值不用区分大小写。

data：表示提交的请求参数，可以是String，数组，json类型的。推荐使用json格式。

例如：data：（“name”:“李四”,“age”:20）

jQuery在发送请求时，会把json中的key作为请求的参数使用，key对应的值作为参数数据。

queryProvinceServlet转为的结果：http://localhost:8080/myweb/queryProvinceServlet?name=李四&age=20

dataType:

数据格式，可以是HTML、text、xml、json等等。表示发起请求后，希望服务器端返回的数据格式。

jQuery可以尝试使用对应格式处理返回的数据。比如你指定了dataType，表示希望服务器返回的是json格式数据。然后jQuery把json数据转为json对象。

服务器代码可以获取到dataType的内容。

例如：请求中dataType:“json”,jQuery发起请求后，在请求头中

Accept	application/json, text/javascript, /; q=0.01

如果dataType:“text”,请求中Accept:text/plain,/;q=0.01

success:

函数function。当服务器端返回了数据，jQuery处理完数据后，执行这个函数。等同于异步对象的

readyState==4&&status==200//表示接收数据

的情况。

例如:sucess:function(resp){开发人员处理服务器返回的数据}

resp是自定义形参，相当于 resp = xhr.responseText;

error:

function()，当请求错误时，执行这个函数。

contentType:

表示请求的参数数据格式。例如application/json，这个内容可以不写。

async:

是一个Boolean值，表示请求是同步的还是异步的。true是异步的，默认是true；false是同步的。

2 $.get()

$.get()这个函数就是执行get请求方式的ajax。

2.1语法

$.get(url,请求参数,success函数,dataType);

2.2例子

这种方式比$.ajax()要简便很多。

$.get("queryName",{"proid":1},function(resp){获取省份名称},"text");

3 $.post()

$.get()这个函数就是执行get请求方式的ajax。

3.1语法

$.post("queryName",{"proid":1},function(resp){获取省份名称},"text");

4.实战（对比）

传送门：https://blog.csdn.net/gao1213977085/article/details/119117443?spm=1001.2014.3001.5501
之前使用js语句实现Ajax，但是使用jQuery实现Ajax更简便清晰。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>使用Ajax查询省份名称</title><script type="text/javascript" src="js/jquery-3.4.1.js"></script><script type="text/javascript">$(function () {//给按钮绑定事件    开始$("#btnSearch").on("click",function () {//alert("button click");$.ajax({url:"queryJson",type:"get",data:{"proid":$("#proid").val()},dataType:"json",success:function (resp) {//resp是服务器返回的数据，这个数据先通过jQuery处理的。//jQuery按照dataType的格式，可以把服务器返回的数据转为json对象。//alert("resp===="+resp) //[object]//更新dom$("#proname").val(resp.name);$("#projiancheng").val(resp.jiancheng);$("#proshenghui").val(resp.shenghui);}})})//事件完成$("#btnGet").click(function () {$.get("queryJson",{"proid":$("#proid").val()},function (resp) {alert("收到的数据="+resp)},"json")})})</script>
</head>
<body>
<div align="center"><p>根据id查询省份全部信息</p><table><tr><td>省份id:</td><td><input type="text" id="proid"></td></tr><tr><td>省份名称</td><td><input type="text" id="proname"></td></tr><tr><td>省份简称:</td><td><input type="text" id="projiancheng"></td></tr><tr><td>省会名称:</td><td><input type="text" id="proshenghui"></td></tr><tr><td>操作</td><td><input type="button" id="btnSearch" value="查询" ><input type="button" id="btnGet" value="Get查询"></td></tr></table>
</div>
</body>
</html>

public class QueryProvinceServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String json ="";String strProid = request.getParameter("proid");Province p = null;//判断是否为空，并且不为空字符串if(strProid!=null&&!strProid.trim().equals("")){ProvinceDao dao = new ProvinceDao();p = dao.queryProvinceName(Integer.valueOf(strProid));//把对象转为json，才通过HttpServletResponse输出。if(p!=null){//说明查出了真实的对象。ObjectMapper om = new ObjectMapper();json = om.writeValueAsString(p);//得到一个JSON格式的字符串}}//获取请求头中的acceptString accept=request.getHeader("Accept");System.out.println("请求头accept = "+accept);System.out.println("sevlet province转为json==="+json);//可以处理不同的请求if(accept.startsWith("application/json")){response.setContentType("application/json;charset=utf-8");PrintWriter out = response.getWriter();out.println(json);out.flush();out.close();}else if(accept.startsWith("text/plain")){response.setContentType("application/json;charset=utf-8");PrintWriter out = response.getWriter();out.println("文本数据="+p.toString());out.flush();out.close();}//输出json给ajax请求。//application/json;给浏览器输出的是一个json格式的数据格式/*response.setContentType("application/json;charset=utf-8");PrintWriter out = response.getWriter();out.println(json);out.flush();out.close();*/}
}

Ajax详解第六篇（jQuery实现Ajax）相关推荐

IIS负载均衡-Application Request Route详解第六篇：使用失败请求跟踪规则来诊断ARR
失败请求跟踪规则(FailedRequest Tracing Rules)是IIS7中对请求处理进行诊断的强大的工具.我们本篇文章将会带领大家一步步的来配置失败请求跟踪规则,并且告诉大家如何使用这些信 ...
负载均衡原理与实践详解第三篇服务器负载均衡的基本概念-网络基础
负载均衡原理与实践详解第三篇服务器负载均衡的基本概念-网络基础系列文章: 负载均衡详解第一篇:负载均衡的需求负载均衡详解第二篇:服务器负载均衡的基本概念-网络基础负载均衡详解第三篇:服务器负 ...
负载均衡原理与实践详解第五篇负载均衡时数据包流程详解
负载均衡原理与实践详解第五篇负载均衡时数据包流程详解系列文章: 负载均衡详解第一篇:负载均衡的需求负载均衡详解第二篇:服务器负载均衡的基本概念-网络基础负载均衡详解第三篇:服务器负载均衡的基 ...
Java程序员从笨鸟到菜鸟之（八十九）跟我学jquery（五）jquery中的ajax详解
Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数 ...
Asp.Net+Jquery.Ajax详解5-$.getScript
目录(已经更新的文章会有连接,从7月25日开始,每2到3天更新一篇): Asp.Net+Jquery.Ajax详解1-开篇(2012.07.25发) Asp.Net+Jquery.Ajax详解2-$. ...
史上最简单MySQL教程详解（进阶篇）之视图
史上最简单MySQL教程详解(进阶篇)之视图为什么要用视图视图的本质视图的作用如何使用视图创建视图修改视图删除视图查看视图使用视图检索变更视图数据 WITH CHECK OPTIO ...
PullScrollView详解（六）——延伸拓展（listview中getScrollY()一直等于0、ScrollView中的overScrollBy）
前言:经常说follow your heart.但等到真到这么一天的时候,却很艰难相关文章: 1.<PullScrollView详解(一)--自定义控件属性> 2.<PullScr ...
IIS负载均衡-Application Request Route详解第三篇：使用ARR进行Http请求的负载均衡（上）...
IIS负载均衡-Application Request Route详解第三篇:使用ARR进行Http请求的负载均衡(上) 在前两篇文章中,我们已经讲述如何配置与安装ARR,从本篇文章开始,我们将重点的 ...
Spotify敏捷模式详解三部曲第二篇：研发过程
本文转自:Scrum 中文网引言在本系列文章的第一篇,我们介绍了Spotify的敏捷研发团队,以及它独特的组织架构.Spotify的研发团队采用的是一种非常独特的组织架构,如下图所示: 整个研发组 ...

Ajax详解第六篇（jQuery实现Ajax）