jQuery中的Ajax

jQuery×Ajax

jquery提供多个与ajax有关的方法，通过jquery ajax方法，能够使用HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML或JSON，同时能够把接收的数据更新到DOM对象。代替XMLHttpRequest，但其实jquery还是封装的异步对象。

(1)`$.ajax()`

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

语法： $.ajax({key: value, key: value, ...})

参数是json格式。其中key是定义好的，需要开发人员给key赋值，表示ajax请求必须的参数。

url：服务器地址，例如某个servlet的访问地址。 queryProvinceServlet
type：请求方法，get、post。默认是get。不区分大小写
data：提交的请求数据，可以是string、数组、json类型的。推荐使用json格式

如：data:{name: "李四", age: 20}

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

转为结果：http://localhost:8080/myweb/queryProvinceServlet?name=李四&age=20
dataType：数据格式，可以是html、text、xml、json等，表示发起请求后，希望服务器端返回的数据格式。jquery可以尝试使用对应格式处理返回的数据。比如指定dataType: json表示希望服务器返回的是json格式数据。然后jquery把json数据转为json对象。

服务器端代码可以获取到dataType的内容。
```
例如：请求中dataType: "json",jquery发起请求后，在请求头中Accept: application/json, text/javascript, */*; q=0.01如果dataType: "text",则请求头中Accept为text/plain
```
success：函数function，当服务器返回数据，jquery处理完数据后，执行这个函数，等同于异步对象的readyState===4&&status===200 的情况。
```
例如：success:function(resp) {code}resp 是自定义形参，相当于resp = xhr.responseText
```
error：请求错误时执行的函数
contentType：请求的参数数据格式，如application/json这个内容可以不写
async：布尔值，表示请求是同步还是异步。默认是true，表示异步；false表示同步。

$.ajax({url: "queryProvinceServlet",type: "get",data: {"name": "李四", "age": 20},dataType: json,success: function(resp) {//code: 更新dom对象},error: function() { alert("请求错误") };}
)

(2)`$.get()`

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

语法：$.get(url, 请求参数, success函数, dataType)

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

(3)`$.post`()

$.post()函数就是执行post请求方式的ajax

语法：$.post(url, 请求参数, success函数, dataType)

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

6、使用ajax级联查询

思路：有两个数据库的查询
1.查询所有的省份名称和id；
2.根据提交的省份id，查询city表，得到城市列表

有两个servlet接收请求，一个查询所有的省份；一个接收省份id的参数，查询省份对应的城市列表。
数据格式：json
发起请求使用$.ajax, $.get, $.post
事件：onChange()

实现步骤：

数据表province(获取全部的id和name列的值)

city表根据provinceid的值，得到id和name列
创建web应用，加入mysql驱动的jar包和Jackson的jar包
创建实体类，Province、City
创建Dao类，QueryDao类，有两个方法
创建Servlet，一个是查询所有省份名称，一个是查询城市列表
创建jsp，发起两个ajax请求

遇到的问题：

1、还是数据库连接的问题注意jar包的版本，同时注意URL和创建驱动的写法
2、引入jquery.js本地文件的时候，报404错误。所以这里不使用本地的资源<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

jQuery中的Ajax相关推荐

关于JQuery中的ajax请求或者post请求的回调方法中的操作执行或者变量修改没反映的问题...
前段时间做一个项目,而项目中所有的请求都要用jquery 中的ajax请求或者post请求,但是开始处理一些简单操作还好,但是自己写了一些验证就出现问题了,比如表单提交的时候,要验证帐号的唯一性,所以 ...
jQuery中终止Ajax请求
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
Java程序员从笨鸟到菜鸟之（八十九）跟我学jquery（五）jquery中的ajax详解
Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数 ...
Jquery中使用ajax请求SSM后台时提示：org.springframework.http.converter.HttpMessageNotReadableException: Could no
场景 Jquery中使用ajax向SSM后台请求数据时提示: org.springframework.http.converter.HttpMessageNotReadableException: C ...
jQuery系列（十四）：jQuery中的ajax
1.什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJAX通过后台加载数据,并在 ...
用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
六、jQuery 中的 AJAX 跨域问题
第 2 章:jQuery 中的 AJAX 官方中文文档:https://jquery.cuishifeng.cn/jQuery.Ajax.html 2.1 get 请求 $.get(url, [dat ...
ajax post 没有返回_Ajax异步技术之三：jQuery中的ajax学习
jQuery中的Ajax学习: jQuery是js的一个轻量型框架,已经将js创建的操作进行了封装,而ajax也是js的一部分,所以jQuery也已经将ajax进行了封装. 封装: $.get(url ...
jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
JQuery中使用Ajax赋值给全局变量失败异常的解决方法，jqueryajax
我们在用JQuery的Ajax从后台提取数据后想把它赋值给全局变量,但是却怎么都赋不进,为什么呢? 原因其实很简单,我们用的Ajax是异步操作,也就是说在你赋值的时候数据还没提取出来,你当然赋不进去, ...

jQuery中的Ajax

jQuery×Ajax

(1)`$.ajax()`

(2)`$.get()`

(3)`$.post`()

6、使用ajax级联查询

jQuery中的Ajax相关推荐

最新文章

热门文章

jQuery中的Ajax

jQuery×Ajax

(1)$.ajax()

(2)$.get()

(3)$.post()

6、使用ajax级联查询

jQuery中的Ajax相关推荐

最新文章

热门文章

(1)`$.ajax()`

(2)`$.get()`

(3)`$.post`()