Django之原生Ajax操作
Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作，该对象在主流浏览器中均存在(除早起的IE)，Ajax首次出现IE5.5中存在（ActiveX控件）。
先通过代码来看看Ajax吧！
views.py
from django.shortcuts import render,redirect,HttpResponse
from django import forms
from django.forms import fields
from app_01 import models def ajax(request):
return render(request, 'ajax.html') def ajax_json(request):
import time
time.sleep(3)
print(request.POST) #打印request.POST内的内容
ret = {'code': True , 'data': request.POST.get('username')}
import json
return HttpResponse(json.dumps(ret)) #向前台发送ret，利用json.dumps()将ret变为字符串
ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"/>
<input type="button" value="Ajax1" onclick="Ajax1();" /> <form action="/ajax_json/" method="POST" >
<input type="text" name="username" />
<input type="text" name="email" />
<input type="submit" onclick="sumitForm();" value="Form提交"/>
</form> <script type="text/javascript" src="/static/jquery-1.12.4.js"></script>
<script>
function Ajax1(){
var xhr = getXHR();
//var xhr = new XMLHttpRequest(); //创建XMLHttpRequest对象
xhr.open('POST', '/ajax_json/',true); //指定用post发，发送到ajax_json里，是否异步为true，默认不填也为true
xhr.onreadystatechange = function(){ //onreadystatechange为回调函数，当匿名函数内的状态发生变化时就会执行，每一次都会执行
if(xhr.readyState == 4){ //一共5个状态，当状态为4时，启动使其发生变化
// 接收完毕
var obj = JSON.parse(xhr.responseText); //responseText为返回值，返回html的返回值
console.log(obj);
}
};
xhr.setRequestHeader('k1','v1'); //发送GET请求头，利用csrf时使用
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8'); //发送post请求时
xhr.send("name=root;pwd=123"); //发送数据，发送的只能是字符串
}
</script>
</body>
</html>
点击Ajax1，可以看到请求已经发送过去
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8'); //发送post请求时
xhr.send("name=root;pwd=123"); //发送数据，发送的只能是字符串
通过这两行代码，可以知道已经向后台发送了请求
看完这些代码，就差不多知道原生ajax是怎么发送请求的了吧！
那下面就说说原生ajax的方法和属性
1、XmlHttpRequest对象介绍
XmlHttpRequest对象的主要方法：
a. void open(String method,String url,Boolen async)
用于创建请求
参数：
method： 请求方式（字符串类型），如：POST、GET、DELETE...
url： 要请求的地址（字符串类型）
async： 是否异步（布尔类型）
b. void send(String body)
用于发送请求
参数：
body： 要发送的数据（字符串类型）
c. void setRequestHeader(String header,String value)
用于设置请求头
参数：
header： 请求头的key（字符串类型）
vlaue： 请求头的value（字符串类型）
d. String getAllResponseHeaders()
获取所有响应头
返回值：
响应头数据（字符串类型）
e. String getResponseHeader(String header)
获取响应头中指定header的值
参数：
header： 响应头的key（字符串类型）
返回值：
响应头中指定的header对应的值
f. void abort()
终止请求
XmlHttpRequest对象的主要属性：
a. Number readyState
状态值（整数）
详细：
0-未初始化，尚未调用open()方法；
1-启动，调用了open()方法，未调用send()方法；
2-发送，已经调用了send()方法，未接收到响应；
3-接收，已经接收到部分响应数据；
4-完成，已经接收到全部响应数据；
b. Function onreadystatechange
当readyState的值改变时自动触发执行其对应的函数（回调函数）
c. String responseText
服务器返回的数据（字符串类型）
d. XmlDocument responseXML
服务器返回的数据（Xml对象）
e. Number states
状态码（整数），如：200、404...
f. String statesText
状态文本（字符串），如：OK、NotFound...
2、跨浏览器支持
XmlHttpRequest
·IE7+, Firefox, Chrome, Opera, etc.
ActiveXObject("Microsoft.XMLHTTP")
·IE6, IE5
Django之原生Ajax操作的更多相关文章
- Django学习---原生ajax
Ajax 原生ajax Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件). ...
- Django（九）下：Ajax操作、图片验证码、KindEditor使用
三.Ajax操作 ajax操作基于浏览器的xmlHttpRequest对象,IE低版本是另外一个对象,jQuery 1 版本对那两个对象做了封装,兼容性最好,2 .3版本不再支持IE低版本了. Aja ...
- ASP.NET学习笔记（5）——原生Ajax基本操作
说明(2017-11-4 15:32:49): 1. 回北京后又快一个月了,上次在家写的下回预告,到底是没把加水印写完,而且这次也不想写.. 2. 上次许的愿,十月份看完asp.net,已经泡汤了,翻 ...
- django 笔记15 ajax系列
参考 http://www.cnblogs.com/wupeiqi/articles/5703697.html # 原生操作# jQuery操作# 伪Ajax操作# XMLHttpReques 伪aj ...
- django（7）modelform操作及验证、ajax操作普通表单数据提交、文件上传、富文本框基本使用
一.modelForm操作及验证 1.获取数据库数据,界面展示数据并且获取前端提交的数据,并动态显示select框中的数据 views.py from django.shortcuts import ...
- Django中的文件上传和原生Ajax
概述 Django中的上传有3种方案: form 表单常规上传,但点击提交后会自动刷新页面 Ajax 上传,不刷新页面,(分为原生ajax上传和jQuery上传),IE7以上不兼容 iframe 上传 ...
- python_way day21 Django文件上传Form方式提交，原生Ajax提交字符处啊，Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式，Django验证码，抽屉示例，
python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...
- Day21 Django之Form文件上传、原生Ajax和实现抽屉实例
一.Form文件上传 """ Django settings for prev_chouti project. Generated by 'django-admin st ...
- 框架----Django之Ajax全套实例（原生AJAX，jQuery Ajax，“伪”AJAX，JSONP，CORS）
一.原生AJAX,jQuery Ajax,“伪”AJAX,JSONP 1. 浏览器访问 http://127.0.0.1:8000/index/ http://127.0.0.1:8000/fake_ ...
随机推荐
- 用Python实现求Fibonacci数列的第n项
1. 背景——Fabonacci数列的介绍(摘自百度百科): 斐波那契数列(Fibonacci sequence),又称黄金分割数列.因数学家列昂纳多·斐波那契(Leonardoda Fibonacc ...
- puppeteer设置代理并检查代理是否设置成功
1. 设置代理: 这一步超级简单,但我掉到了坑里并扑腾了小一天的时间,那就是:箭头指向处一定一定不要加空格!!! 2. 检查代理是否设置成功: 在打开的浏览器里,打开百度,输入ip,如果查出来的结果跟 ...
- JAVA程序测试时用到的与内存测试有关的东西
1.JVM启动参数 垃圾回收器调用情况参数,使用如下参数可以看到程序何时启动GC进行垃圾回收,和垃圾回收的详细信息. java Test -XX:+PrintGCDetails -XX:+PrintG ...
- 【uoj#225】[UR #15]奥林匹克五子棋 构造
题目描述 两个人在 $n\times m$ 的棋盘上下 $k$ 子棋,问:是否存在一种平局的情况?如果存在则输出一种可能的最终情况. 输入 第一行三个正整数 $n,m,k$ ,意义如前所述. 输出 如 ...
- [洛谷P1642]规划
题目大意:有一棵$n(n\leqslant100)$个点的树,每个点有两个权值$a,b$,要求选择一个$m$个点的连通块$S$,最大化$\dfrac{\sum\limits_{i\in S}a_i}{ ...
- 第三周——构建一个简单的Linux系统MenuOS
[洪韶武 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 ] 第三周 构建一个 ...
- 使用Ajax内容签名，减少流量浪费
前端UI界面用Ajax获取数据内容的时候,一般是直接获取内容数据并填充,不管内容有无变化,不管数据量多大,都是直接重新加载数据,例如定时刷新公告等. 今天在浏览器控制台调试的时候,发现动态刷新内容,其 ...
- 【bzoj4869】相逢是问候
Portal-->bzoj4869 Solution 这道题的话..长得就是线段树的样子qwq 如果做过的话..可能会联想到bzoj3211(没写博qwq晚点再说吧哈哈..) 首先大胆猜一波结论 ...
- 安装黑苹果的config.plist
前提条件:有mac真机.目前在测试虚拟机可行性 第一步:制作U盘启动盘 1.在 app store 下载 mac OS sierra 镜像 2.格式化 U 盘,gpt 格式 3.执行以下命令(具体名称 ...
- HDU4003 树形DP
题意 :给一棵n个节点的树, 节点编号为1~n, 每条边都有一个花费值. 有k个机器人从S点出发, 问让机器人遍历所有边,最少花费值多少? 这题最难的地方应该就是如何定义状态了 定义dp ...