jquery ajax同步【jquery同步方法】 收藏 0

原生ajax和django结合bootstrap-table，jquery与ajax的使用

浏览网页的时候，整个网页刷新叫全局刷新，只是部分显现叫局部刷新，代替浏览器发起请求并接收响应数据的对象叫异步请求对象（XMLHttpRequest），创建异步对象的语法：

var xml=new XMLHttpRequest();

ajax（asynchronous javascript and xml）就是一种无需重新加载整个网页的情况下，更新部分网页内容的方法。

XMLHttpRequest方法有：

open(请求方式，服务器端访问地址，异步true还是同步false)

send(要发送的数据)使用异步对象发送请求

setRequestHeader(header，value)用于设置请求头

getAllResponseHeaders()获取所有响应头

getResponseHeader()获取响应头中指定的header的值

abort()终止请求

属性有：

ReadyState（0是初始化值，1代表执行open，2代表执行send，3代表异步对象拿到数据，4代表处理数据完毕），status（200代表请求成功，404代表服务器资源没有找到，500代表服务器内部代码有误），responseText（表示服务器端返回的数据）

使用步骤：

1,创建对象, var xml=new XMLHttpRequest();

2,给异步对象绑定onreadystatechange事件，xml.onreadystatechange=function(){根据ReadyState值做请求处理相关代码}

3,初始请求参数，执行xml.open(“get”,”/index”,true)函数

4,发送请求，执行xml.send(“name=root;pwd=123”)函数

Html中定义一个叫xhr的ajax对象，

View.py中函数定义，ajax_json返回ret字典

网页展示：

如下图html中定义了一个edit按钮，里面调用edit_server这个函数，这个函数通过bootstrap-table的formatter函数传入一个row.id参数，row.id代表了列表中一整行的元素。点击edit按钮后，会得到这里的url返回的数据，这里除了可以打印到console也显示到了前端的table区域了。

Html端jquery函数传入一个id参数，视图函数这边根据传入的参数，找到这个id对应的相关字段，再返回给前端显示。

console输出：

AJAX教程

关注我，带你了解java

一、AJAX简介

1.什么是AJAX？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。ajax 中使用的技术有JavaScript, html , dom , xml ,css 等。主要是 JavaScript , XML.

JavaScript:：使用脚本对象 XMLHttpRequest 发送请求， 接收响应数据

XML：发送和接收的数据格式，现在使用 json

AJAX 不单需要前端的技术，同时需要后端（服务器）的配合。服务器需要提供数据，数据是 AJAX 请求的响应结果。

2.原生JS实现AJAX

代码实现：

网页代码：

注释：

1. open(method, url, async) 方法需要三个参数:

　 method：发送请求所使用的方法（GET或POST）；与POST相比，GET更简单也更快，并且在大部分情况下都能用；然而，在以下情况中，请使用POST请求：

无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

　url：规定服务器端脚本的 URL(该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）)；

　async：规定应当对请求进行异步（true）或同步（false）处理；true是在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理；false是等待服务器响应再执行。

2. send() 方法可将请求送往服务器。

3. onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。

4. readyState：存有服务器响应的状态信息。

0: 请求未初始化（代理被创建，但尚未调用 open() 方法）

1: 服务器连接已建立（open方法已经被调用）

2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）

3: 请求处理中（下载中，responseText 属性已经包含部分数据）

4: 请求已完成，且响应已就绪（下载操作已完成）

5. responseText：获得字符串形式的响应数据。

6. setRequestHeader()：POST传数据时，用来添加 HTTP 头，然后send(data)，注意data格式；GET发送信息时直接加参数到url上就可以，比如url?a=a1&b=b1。

PS：Fetch polyfill 的基本原理是探测是否存在window.fetch方法，如果没有则用 XHR 实现。

3.JQuery的三种方式实现AJAX：

3.1 $.ajax()

该方法用于执行Ajax请求，常用于其他jQuery Ajax方法不能完成的请求，也许我们可以把它称为\”jQuery中Ajax系列方法之母\”。

1.url：链接地址，字符串表示

2.data：需发送到服务器的数据，GET与POST都可以，格式为{A: ‘…’, B: ‘…’}

3.type：“POST” 或 “GET”，请求类型

4.timeout：请求超时时间，单位为毫秒，数值表示

5.cache：是否缓存请求结果，bool表示

6.contentType：内容类型，默认为\”application/x-www-form-urlencoded\”

7.dataType：服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json

8.success：请求成功后，服务器回调的函数

9.error：请求失败后，服务器回调的函数

10.complete：请求完成后调用的函数，无论请求是成功还是失败，都会调用该函数；如果设置了success与error函数，则该函数在它们之后被调用

11.async：是否异步处理，bool表示，默认为true；设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行

3.2 $.get()

$.get() 函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用。

语法：

参数介绍：

发起不带参数的请求时，直接提供请求的 URL 地址和请求成功之后的回调函数即即可

发起带参数的请求时，以参数对象的形式添加第二个参数

3.3 $.post()

jQuery 中 $.post() 函数的功能单一，专门用来发起 post 请求，从而向服务器提交数据。

语法：

参数介绍：

使用 $post() 向服务器提交数据

星辰大海，永不止步

END

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com