网站首页 > 技术文章 正文
通用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输出:
猜你喜欢
- 2025-07-02 ASP.NET MVC+Bootstrap个人博客之文章打赏(六)
- 2025-07-02 bootstrap的提示插件tooltip的使用
- 2025-07-02 用 Bootstrap4 制作响应式网页二(导航菜单)
- 2025-07-02 bootstrap 的滚动监听(监听滚动条滚动事件)
- 2025-07-02 BootstrapBlazor :使用 .NET 生成交互式客户端 Web UI 的框架
- 2025-07-02 Bootstrap技巧之跟随导航(bootstrap官网入口制作一个导航栏)
- 2025-07-02 bootstrap的tab标签页的使用(bootstrap标签页垂直方向)
- 2025-07-02 新书速览|Bootstrap 5从入门到精通(视频教学版)
- 2025-07-02 基于bootstrap实现的在线商城前端整站源码,页面齐全
- 2025-07-02 day58:bootstrap框架(bootstrap框架怎么用)
你 发表评论:
欢迎- 586℃几个Oracle空值处理函数 oracle处理null值的函数
- 580℃Oracle分析函数之Lag和Lead()使用
- 567℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 564℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 560℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 553℃【数据统计分析】详解Oracle分组函数之CUBE
- 539℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 533℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)