原生ajax中get和post请求
后台代码:
- class AjaxHanlder(tornado.web.RequestHandler):
- def get(self):
- print(self.get_argument('type',None))
- if self.get_argument('type',None):
- self.write("get ok")
- else:
- self.render('ajax_test.html')
- def post(self, *args, **kwargs):
- self.write("post ok")
前端ajax:
为了兼容各个浏览器都有ajax方法
- function GetXhr(){
- var xhr=null;
- if(XMLHttpRequest){
- xhr=new XMLHttpRequest();
- }else{
- xhr=new ActiveXObject("Microsoft.XMLHTTP");
- }
- return xhr;
- }
其中get请求一般都把数据放到url中,而不是send()中
- function XhrGetRequest(){
var xhr=GetXhr();
//定义回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
document.getElementsByClassName('reponse')[0].innerHTML=xhr.responseText;
}
}
//指定连接方式和地址---文件方式
xhr.open('get',"/ajax?type=1&kk=2",true);
//发出请求
xhr.send(null);
}
只有post请求时,需要将数据放到send()中传递,并且需要设置请求头
- function XhrPostRequest(){
var xhr=GetXhr();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
document.getElementsByClassName('reponse')[0].innerHTML=xhr.responseText;
}
}
xhr.open('post','/ajax',true);
//post需要设置请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset-UTF-8");
//发送请求
xhr.send("type=1&kk=2");
}
使用案例:
- <body>
- <form method="post" action="login">
- 用户名:<input id="user" type="text" name="username">
- 密码:<input id="pwd" type="password" name="password">
- <input type="checkbox" id="auto" name="auto" value="1"/>七天免登录
- <input type="button" onclick="SubmitForm();" value="登录">
- <span class="err"></span>
- </form>
- </body>
- </html>
- <script>
- var xhr=null;
- function SubmitForm(){
- var username=document.getElementById("user").value;
- var pwd=document.getElementById('pwd').value;
- var chkEle=document.getElementById('auto');
- var chk=null;
- if(chkEle.checked==true)
- chk=1;
- else
- chk=0;
- xhr=new XMLHttpRequest();
- /*参数 发送方式 发送地址 是否异步*/
- //xhr.open('GET',"/login",true);
- xhr.open("POST","/login",true);
- //当readystate值改变时会自动去触发对应函数,先对这个值进行判断,在决定对应的函数
- //0.未初始化,尚未调用open
- //1.启动,调用了open未调用send
- //2.发送,调用了send,未收到响应
- //3.接收,已经接收到了部分响应消息
- //4.完成,已经接收到所有的数据
- xhr.onreadystatechange =func;
- //setRequestHeader(String header,String value)设置请求头
- //getAllResponseHeaders()获取所有响应头
- //getResponseHeader(String header)获取响应头中指定的header的值
- //void abort()终止请求
- //post发送数据需要设置请求头
- xhr.setRequestHeader('content-type','application/x-www-form-urlencoded; charset-UTF-8')
- //用于发送数据
- xhr.send('username='+username+';password='+pwd+';auto='+chk);
- //String responseText 服务器返回的数据字符串类型
- //XmlDocument responseXML 服务器返回的数据(xml对象)
- //Number states 状态码
- //String statesText 状态码对应文本
- }
- function func(){
- if(xhr.readyState == 4){
- console.log(xhr.responseText);
- var data=xhr.responseText;
- var ret_dict = JSON.parse(data);
- if(ret_dict.status){
- //登录成功
- }else{
- //登录失败
- var ele=document.getElementsByClassName('err')[0];
- ele.innerHTML="<h1 style=\"color:red;\">"+ret_dict.message+"</h1>"
- }
- }
- }
- </script>
open(请求方式, URL, 是否异步)
send(请求体)
onreadystatechange,指定监听函数,它会在xmlHttp对象的状态发生变化时被调用
readyState,当前xmlHttp对象的状态,其中4状态表示服务器响应结束
status:服务器响应的状态码,只有服务器响应结束时才有这个东东,200表示响应成功;
responseText:获取服务器的响应体
代码实例:
- <div>
- <table border="">
- <thead>
- <tr>
- <th>ID</th>
- <th>姓名</th>
- <th>年龄</th>
- <th>性别</th>
- <th>班级</th>
- <th>编辑</th>
- </tr>
- </thead>
- <tbody>
- <tr><td></td>
- <td>李四</td>
- <td></td>
- <td>男</td>
- <td>C++工程师</td>
- <td><a onclick="XhrPostRequest(this);">删除</a>|<a href="/edit_student.html?nid=4">编辑</a></td>
- </tr>
- <tr><td></td>
- <td>fas</td>
- <td></td>
- <td>男</td>
- <td>Python工程师</td>
- <td><a onclick="XhrPostRequest(this);">删除</a>|<a href="/edit_student.html?nid=5">编辑</a></td>
- </tr>
- </tbody>
- </table>
- </div>
- </body>
- <script>
var xhr=null
var thr=null
function GetXhr(){
if(XMLHttpRequest){
var Xh = new XMLHttpRequest();
}else{
Xh = new ActiveXObject('Microsoft.XMLHTTP');
}
return Xh
}- function call_func(){
if(xhr.readyState == 4){
var data=xhr.responseText;
var ret_dict = JSON.parse(data);
if(ret_dict.status){
//登录成功
alert("删除成功")
thr.parentElement.parentElement.remove()
}
}
}- function XhrPostRequest(ths){
thr=ths
xhr=GetXhr();
xhr.onreadystatechange = call_func;
var id=thr.parentElement.parentElement.childNodes[0].textContent;
xhr.open('get','/del_student.html?nid='+id);
xhr.send();
}
</script>
关于更多信息,以及jquery中ajax使用可以参考
更多请看:原生ajax中get和post请求
更多请看:http://www.cnblogs.com/yuanchenqi/articles/5997456.html
>这里
原生ajax中get和post请求的更多相关文章
- Django框架 之 基于Ajax中csrf跨站请求伪造
Django框架 之 基于Ajax中csrf跨站请求伪造 ajax中csrf跨站请求伪造 方式一 1 2 3 $.ajaxSetup({ data: {csrfmiddlewaretoken: ...
- ajax中Post和Get请求方式的区别?
ajax中Post和Get请求方式的区别: 1.Post传输数据时,不需要在URL中显示出来,而Get方法要在URL中显示. 2.Post传输的数据量大,可以达到2M,而Get方法由于受到URL长度的 ...
- AJax中post与get请求注意事项
在使用ajax提交表单时,一定要区分提交按钮的形式和数据表头的设置,实例如下: GET请求: HTML代码: <!doctype html> <html lang="en& ...
- ajax中的setRequestHeader设置请求头
1.问题引发点: 前不久发现一个问题: 前端并没有设置请求头信息里面的Accept-Encoding:gzip...但是在请求头中可以明显的看到Accept-Encoding:gzip, deflat ...
- 资料汇总--Ajax中Put和Delete请求传递参数无效的解决方法(Restful风格)【转】
开发环境:Tomcat9.0 在使用Ajax实现Restful的时候,有时候会出现无法Put.Delete请求参数无法传递到程序中的尴尬情况,此时我们可以有两种解决方案:1.使用地址重写的方法传递参数 ...
- Ajax中Put和Delete请求传递参数无效的解决方法(Restful风格)
本文装载自:http://blog.csdn.net/u012737182/article/details/52831008 感谢原文作者分享 开发环境:Tomcat9.0 在使用Ajax实现R ...
- 原生Ajax发送get、post请求每一步
说明 发送Ajax的请求的核心对象是XMLHttpRequest,因此我们需要了解该对象的相关属性和方法 方法(图一) 属性(图二) 第一步:创建 XMLHttpRequest对象,下面都简写为 xh ...
- 原生ajax中readyState中的含义以及HTTP协议状态码的含义
xmlhttp.readyState的值及解释: 0:请求未初始化(还没有调用 open()). 1:请求已经建立,但是还没有发送(还没有调用 send()). 2:请求已发送,正在处理中(通常现在可 ...
- ajax中加上AntiForgeryToken防止CSRF攻击
经常看到在项目中ajax post数据到服务器不加防伪标记,造成CSRF攻击 在Asp.net Mvc里加入防伪标记很简单在表单中加入Html.AntiForgeryToken()即可. Html.A ...
随机推荐
- GitHub18
兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编程新手.热爱编程.对开源社区感兴趣 人群的月刊,月刊的内容包括:各种编 ...
- Spring.Net快速入门:控制翻转、依赖注入、面向切面编程
Spring.Net主要功能: 1.IoC:控制翻转(Inversion of Control) 理解成抽象工厂翻转控制:就是创建对象的权利由开发人员自己控制New,转到了由容器来控制. 2.DI: ...
- fetch 代替 XMLHttpRequest (json-server 模拟后台接口)
一.fetch 是 XMLHttpRequest 的替代方案.说白了就是除了 ajax 获取后台数据之外也可以用fetch 来获取. 二.fetch 的支持性还不是很好.挂载于BOM中可以通过浏览器直 ...
- [转帖]浪潮openstack的逆袭
扬长补短 浪潮云平台的逆袭 http://blog.itpub.net/11310314/viewspace-2564083/ 浪潮并不是最早加入OpenStack的国内厂商,却实现同比303.1%的 ...
- Fantacy团队周二站立会议
词频分析模型 1.这次站会是周二开的,但是由于我个人的疏忽,哎,不说了. 2.会议时间:2016年3月29日12:03~12:30. 持续时长:27分钟 会议参加成员:组长:杨若鹏 http://ww ...
- hive分区表
分区表创建 row format delimited fields terminated by ',';指明以逗号作为分隔符 依靠插入表创建分区表 从表sample_table选择 满足分区条件的 ...
- 关于miniconda的安装,配置以及包批量安装和使用
由于时间很晚了.就不写废话了. conda官方文档地址:http://conda.pydata.org/docs/ 一切其实都可以从miniconda的文档找到,这里只纪录自己操作的时候遇到的值得一说 ...
- 关于MySQL中添加数据的两种方法
下面介绍两种执行SQL命令的方法,并作出相应地总结,第一种介绍一种常规用法,下面进行做简要地分析,首先我们需要执行打开数据库操作首先创建一个MySqlConnection对象,在其构造函数中传入一个连 ...
- ES next & Async Await
ES next & Async Await https://jestjs.io/docs/en/asynchronous#async-await ES7 new async () => ...
- C# PictureBox控件畫圖
PictureBox的正方向: BitMap初始化: Bitmap bt = new Bitmap(Width,Height); Graphics gdi = Graphics.FromIm ...