网站首页 > 知识剖析 正文
通用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字典
def ajax_json (request):
ret={‘status’:True, ‘data’:None }
import json
return HttpResponse(json.dumps(ret))
url定义
url('ajax_json/#39;,views.ajax_json),
网页展示:
jquery中使用的ajax
首先是get方法
如下图html中定义了一个edit按钮,里面调用edit_server这个函数,这个函数通过bootstrap-table的formatter函数传入一个row.id参数,row.id代表了列表中一整行的元素。点击edit按钮后,会得到这里的url返回的数据,这里除了可以打印到console也显示到了前端的table区域了。
然后是post方法
Html端jquery函数传入一个id参数,视图函数这边根据传入的参数,找到这个id对应的相关字段,再返回给前端显示。
console输出:
猜你喜欢
- 2024-12-03 停止javascript的ajax请求,取消axios请求,取消reactfetch请求
- 2024-12-03 HTML5 的一些小的整理吧
- 2024-12-03 前端架构101:MVC的不足与Flux的崛起
- 2024-12-03 一篇文章搞定form表单中上传图片控件使用技巧
- 2024-12-03 Python在selenium里面注入JavaScript程序的方法
- 2024-12-03 写给前端工程师的Flutter详细教程
- 2024-12-03 vue - Vue中的ajax
- 2024-12-03 开源适用于JavaScript的Excel解析器和生成器
- 2024-12-03 使用JS把图片压缩并转成Base64的简便方法
- 2024-12-03 jQuery EasyUI使用教程:数据网格中的列运算
- 05-05vin码怎么查车型?车辆VIN码的第十位代表什么信息?
- 05-05Java数组数据的操作之检查日期格式是否正确
- 05-05苹果序列号怎么看生产日期和产地?
- 05-05参考文献中的M J N D字母代表什么?
- 05-05闲鱼交易技巧,满满的干货(闲鱼的交易流程怎么样的?我是买家)
- 05-05忘记自已多少岁了?可试试年龄计算器
- 05-05汽车-剖析、解析车架号(VIN)中的第10位-车型年份
- 05-05干货|史上最全波特酒年份指南(波特酒 年份)
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)