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

boyanx3周前技术教程5

通用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输出:

标签: bootstrap表格

相关文章

Vue3+Bootstrap5整合:企业级后台管理系统实战

简洁而不简单,优雅而不失强大在当今快速发展的企业数字化进程中,高效、美观的后台管理系统已成为企业运营的核心支撑。作为前端开发者,我们如何选择技术栈,才能既保证开发效率,又能打造出专业级的用户体验?答案...

UI组件库Kendo UI for Angular入门指南教程 - 图表功能

Kendo UI for Angular图表提供了高质量的图形数据可视化选项。Kendo UI for Angular官方最新版免费下载试用,历史版本下载,在线文档和帮助文件下载-慧都网它们包括具有广...

推荐web前端框架bootstrap

bootstrap是基于Jquery而开发的一个前端框架。全中文的学习网站:http://www.runoob.com/bootstrap/bootstrap-tutorial.html实际上就是ht...

html实现原生table并设置表格边框的两种方式

在 HTML 中实现原生表格并设置表格边框的详尽教程 在 HTML 中,表格是展示结构化数据的重要工具。为了使表格更加清晰、美观,设置表格边框是常见的需求。本文将深入探讨 两种原生方式 来实现表格边框...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。