AJAX初识(原生JS版AJAX和Jquery版AJAX)

复制代码
一、什么是JSON
1.介绍JSON独立于语言,是一种与语言无关的数据格式。JSON指的是JavaScript对象表示法(JavaScript Object Notation)JSON是轻量级的文本数据交换格式JSON具有自我描述性,更易理解JSON使用JavaScript语法来描述数据对象,但是JSON仍然独立于语言和平台。JSON解析器和JSON库支持许多不同的编程语言。2. Python中JSON操作import json1. json.dumps() --> 序列化   /json.dump() --> 文件操作 2. json.loads() --> 反序列化 /json.load() --> 文件操作3. JS中JSON操作1. JSON.stringify() --> 序列化2. JSON.parse()     --> 反序列化

4. 例如合格的json对象["one", "two", "three"]{ "one": 1, "two": 2, "three": 3 }{"names": ["张三", "李四"] }[ { "name": "张三"}, {"name": "李四"} ] 

  不合格的json对象{ name:
"张三", 'age': 32 } // 属性名必须使用双引号[32, 64, 128, 0xFFF] // 不能使用十六进制值{ "name": "张三", "age": undefined } // 不能使用undefined{ "name": "张三","birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),"getName": function() {return this.name;} // 不能使用函数和日期对象}5. 与XML的比较JSON 格式于2001年由 Douglas Crockford 提出,目的就是取代繁琐笨重的 XML 格式。JSON 格式有两个显著的优点:书写简单,一目了然;符合 JavaScript 原生语法,可以由解释引擎直接处理,不用另外添加解析代码。所以,JSON迅速被接受,已经成为各大网站交换数据的标准格式,并被写入ECMAScript 5,成为标准的一部分。XML和JSON都使用结构化方法来标记数据,下面来做一个简单的比较。用XML表示中国部分省市数据如下:
<?xml version="1.0" encoding="utf-8"?><country><name>中国</name><province><name>黑龙江</name><cities><city>哈尔滨</city><city>大庆</city></cities></province><province><name>广东</name><cities><city>广州</city><city>深圳</city><city>珠海</city></cities></province><province><name>台湾</name><cities><city>台北</city><city>高雄</city></cities></province><province><name>新疆</name><cities><city>乌鲁木齐</city></cities></province></country>
View Code


  用JSON表示如下:
{"name": "中国","province": [{"name": "黑龙江","cities": {"city": ["哈尔滨", "大庆"]}}, {"name": "广东","cities": {"city": ["广州", "深圳", "珠海"]}}, {"name": "台湾","cities": {"city": ["台北", "高雄"]}}, {"name": "新疆","cities": {"city": ["乌鲁木齐"]}}]}
View Code
 
    由上面的两端代码可以看出,JSON 简单的语法格式和清晰的层次结构明显要比 XML 容易阅读,并且在数据交换方面,由于 JSON 所使用的字符要比 XML 少得多,可以大大得节约传输数据所占用得带宽二、AJAX简介
1、介绍AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。AJAX 不是新的编程语言,而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在不知不觉中完成请求和响应过程)AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。2、AJAX常见应用情景 1.搜索引擎根据用户输入的关键字,自动提示检索关键字。2.还有一个很重要的应用场景就是注册时候的用户名的查重。其实这里就使用了AJAX技术!当文件框发生了输入变化时,使用AJAX技术向服务器发送一个请求,然后服务器会把查询到的结果响应给浏览器,最后再把后端返回的结果展示出来。当输入用户名后,把光标移动到其他表单项上时,浏览器会使用AJAX技术向服务器发出请求,服务器会查询你输入的用户名是否存在,最终服务器返回true表示名你输入的用户名已经存在了,浏览器在得到结果后显示“用户名已被注册!”。整个过程中页面没有刷新,只是局部刷新了;在请求发出后,浏览器不用等待服务器响应结果就可以进行其他操作;3、AJAX的优缺点优点:AJAX使用JavaScript技术向服务器发送异步请求;AJAX请求无须刷新整个页面;因为服务器响应内容不再是整个页面,而是页面中的部分内容,所以AJAX性能高; 
  缺点:
    AJAX滥用对服务端压力比较大三、JS实现AJAX
1.注意:一般我们都不使用原生的JS实现AJAX,因为原生JS的步骤太繁琐(下面会介绍简单的AJAX实现)2. JS实现AJAX模板
        var b2 = document.getElementById("b2");b2.onclick = function () {// 原生JSvar xmlHttp = new XMLHttpRequest();xmlHttp.open("POST", "/ajax_test/", true);xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xmlHttp.send("username=q1mi&password=123456");xmlHttp.onreadystatechange = function () {if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {alert(xmlHttp.responseText);}};};
View Code
 

 


四、AJAX请求设置csrf_token
1、方式1
通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送。
$.ajax({url: "/login/",type: "POST",data: {"username": "xm","password": 123,"csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()  // 使用jQuery取出csrfmiddlewaretoken的值,拼接到data中
  },success: function (res) {console.log(res);}
})
View Code
 


2
、方式2 通过获取返回的cookie中的字符串 放置在请求头中发送(需要引入一个jquery.cookie.js插件)
$.ajax({url: "/login/",type: "POST",headers: {"X-CSRFToken": $.cookie('csrftoken')},  // 从Cookie取csrftoken,并设置到请求头中data: {"username": "xm", "password": 123},success: function (res) {console.log(res);}
})
View Code
 


3、方式3 自己写一个getCookie方法 创建一个JS文件,代码如下: (这是官网提供的代码)
// 定义一个从本地获取Cookie的函数
function getCookie(name) {var cookieValue = null;if (document.cookie && document.cookie !== '') {var cookies = document.cookie.split(';');for (var i = 0; i < cookies.length; i++) {var cookie = jQuery.trim(cookies[i]);// Does this cookie string begin with the name we want?if (cookie.substring(0, name.length + 1) === (name + '=')) {cookieValue = decodeURIComponent(cookie.substring(name.length + 1));break;}}}return cookieValue;
}
// 调用上面定义的函数,从本地取出csrftoken对应的Cookie值
var csrftoken = getCookie('csrftoken');function csrfSafeMethod(method) {// these HTTP methods do not require CSRF protectionreturn (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}$.ajaxSetup({beforeSend: function (xhr, settings) {if (!csrfSafeMethod(settings.type) && !this.crossDomain) {// 给所有的AJAX请求设置请求头:xhr.setRequestHeader("X-CSRFToken", csrftoken);}}
});
View Code
 
使用的时候只需要导入你这个JS代码,ajxa请求就不需要自己手动添加csrf的值了注意:方式3和方式2其实是同一种方法,只是方式2是使用别人写好的插件,方式3是自己写而已。如果使用从cookie中取csrftoken的方式,需要确保cookie存在csrftoken值。如果你的视图渲染的HTML文件中没有包含 {% csrf_token %},Django可能不会设置CSRFtoken的cookie。这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie。使用方式2和3需要在views.py的视图函数中加上这个装饰器确保浏览器中有cookie
django.views.decorators.csrf import ensure_csrf_cookie@ensure_csrf_cookie
def login(request):pass五、jQuery实现的AJAX
1、最基本的ajax
发送ajax请求
$.ajax({})参数:url: 提交到哪个URL地址type: 提交的方式data: {你要发送的数据}success: function (res) {请求发送过去,被正常响应后执行的函数,res是后端返回来的数据}error: function (err) {请求发送过去,响应失败时执行的函数}2、验证用户名是否存在的例子
1. models.py
class UserInfo(models.Model):username = models.CharField(max_length=12)password = models.CharField(max_length=20)2. HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta http-equiv="content-type" charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Login</title>
</head><body><p><label for="i1">用户名:</label><input type="text" name="username" id="i1"><span id="s1" style="color: red;"></span>
</p>{% csrf_token %}<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">$("#i1").blur(function () {//输入框失去焦点时触发ajax请求
        $.ajax({url: '/regirest/',type: 'POST',data: {username: $("#i1").val(), // 防止跨站伪造请求,需要添加csrf_token的值
                    csrfmiddlewaretoken: $("[name = 'csrfmiddlewaretoken']").val(),},success: function (res) {$("#s1").text(res)}})})
</script></body>
</html>
View Code


3. views.py
def regirest(request):if request.method == 'POST':username = request.POST.get('username')is_exist = UserInfo.objects.filter(username=username)if is_exist:return HttpResponse('用户名已存在')else:return HttpResponse('用户名可用')return render(request, 'regirest.html')
View Code
 


3、用户登录例子 1. HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta http-equiv="content-type" charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Login</title>
</head><body><div><h1>欢迎登录</h1></div>
<div><p><label for="i1">用户名:</label><input type="text" id="i1"></p><p><label for="i2">密码:</label><input type="password" id="i2"></p><p><button type="button" id="b1">登录</button><span style="color: red"></span></p>{% csrf_token %}
</div><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">$("#b1").click(function () {$.ajax({url: '/login/',type: 'POST',data: {username: $("#i1").val(),pwd: $("#i2").val(),// 防止跨站伪造请求,需要添加csrf_token的值
                    csrfmiddlewaretoken: $("[name = 'csrfmiddlewaretoken']").val(),},success: function (res) {if (res.code === 0){location.href = res.next_url}else {// 有错误
                    $("#b1+span").text(res.err_msg)}}})})
</script></body>
</html>
View Code


2. views.py
class LoginView(views.View):def get(self, request):return render(request, 'login.html')def post(self, request):username = request.POST.get('username')pwd = request.POST.get('pwd')is_ok = UserInfo.objects.filter(username=username, password=pwd)res = {'code': 0} # 登录状态 0代表登录成功if is_ok:# 登录成功,跳转到regirest页面res['next_url'] = '/regirest/'return JsonResponse(res)else:# 登录失败,在页面上显示错误提示res['code'] = 1res['err_msg'] = '用户名或者密码错误'return JsonResponse(res)
View Code
 

 

4、上传文件例子
1. HTML代码
<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="content-type" charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Upload</title>
</head>
<body>{% csrf_token %}<h1>上传文件</h1>
<div>
<input type="file" id="f1">
<button id="b1"> 上传</button>
</div>
<span style="color: red" id="s1"></span><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>$('#b1').click(function () {// 取到要上传的文件数据,存到一个对象中var fdObj = new FormData();fdObj.append('xx', $('#f1')[0].files[0]);// 在请求的数据中添加csrftokrnvar csrfToken = $('[name="csrfmiddlewaretoken"]').val();fdObj.append('csrfmiddlewaretoken', csrfToken);// 发ajax请求
        $.ajax({url: '/upload/',type: 'post',data: fdObj,processData: false,  // 告诉jQuery不要处理我上传的数据
            contentType: false,  // 告诉jQuery不要设置请求的文件类型,这两个参数相当于enctype="multipart/form-data"
            success: function (res) {$("#s1").text(res);}})})
</script>
</body>
</html>
View Code


2.views.py
class UploadView(views.View):def get(self, request):return render(request, 'upload.html')def post(self, request):file_obj = request.FILES.get('xx')file_name = file_obj.namewith open(file_name, 'wb') as f:for c in file_obj.chunks():f.write(c)return HttpResponse('上传成功!')
View Code

 

复制代码

 

转载于:https://www.cnblogs.com/yidashi110/p/10091961.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/366344.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python保存为xlsb_Read XLSB File in Pandas Python

问题There are many questions on this, but there has been no simple answer on how to read an xlsb file into pandas. Is there an easy way to do this?回答1:Hi actually there is a way. Just use pyxlsb library.import pandas as pdfrom pyxlsb import open_workboo…

内存不足而没有OutOfMemoryError

这实际上是最初发布于2010年的帖子的转世。 昨天&#xff0c;当听到我们的工程师咒骂一个特别令人讨厌的错误时&#xff0c;闪回发生了。 当诅咒停止时&#xff0c;我走过去核实我的怀疑。 瞧&#xff0c;我是正确的–情绪波动是由应用程序用尽了堆空间导致的&#xff0c;但死于…

人工智能第二星期总结-------纵里寻它千百度

2018-07-28 第二周&#xff1a; 此时此刻我怀着无比沉重的心情在这里做一周的学习检讨工作 这星期依此就开始讲到了函数&#xff0c;话说函数可是python里面的钟头戏&#xff0c;不仅可以节约代码&#xff0c;还可以把代码重复使用&#xff0c;只要后面轻轻松松就可以搞定啦&am…

个人作业——软件产品案例分析

个人作业——软件产品案例分析 第一部分 调研&#xff0c;评测 评测&#xff1a; 第一次上手体验 第一眼看上去功能很全面&#xff0c;但是到点开来发现功能大部分没有实现&#xff0c;体验不太好。 缺陷Bug情况 课表查询 bug描述&#xff1a;课表查询没有课表结果,点进去当前周…

java hashtable put_Java Hashtable put()方法与示例

哈希表类put()方法put()方法在java.util包中可用。put()方法用于将给定的键元素(key_ele)放入给定的值元素(val_ele)。put()方法是一个非静态方法&#xff0c;只能通过类对象访问&#xff0c;如果尝试使用类名访问该方法&#xff0c;则会收到错误消息。put()方法在放置键/值对时…

HTML之表单

表单&#xff1a; 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如&#xff1a;文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 表单使用表单标签 <form> 来设置: <form> . input 元素 . </form>…

将AspectJ与NetBeans平台开发集成

您是否正在使用NetBeans平台开发项目&#xff1f; 您愿意使用AspectJ来使用AOP吗&#xff1f; 您不知道如何将AspectJ编译器集成到NetBeans的内部版本中&#xff1f; 如果您的回答是“是”&#xff0c;则此帖子适合您。 我决定写这篇技术文章&#xff0c;是因为我在寻找该解决…

Linux CentOS 6.5 使用自带jdk修改环境变量

来源:https://www.cnblogs.com/zhenxiqia/p/9049290.html Linux CentOS 6.5 使用自带jdk修改环境变量 首先声明&#xff0c;默认jdk指我们安装完CentOS后系统自带jdk&#xff0c;自己下载安装的jdk只需要下载&#xff0c;解压即可&#xff0c;之后步骤与此文一致 1.查看我们默认…

第二阶段冲刺10

基本的代码已经编写完成&#xff0c;游戏的功能已经完善&#xff0c;基本上已经是一个合格的软件了&#xff0c;这次为期10天的冲刺很充实&#xff0c;我们切实的完善了软件&#xff0c;学会了很多&#xff0c;也可以更好的融入团队中了。团结就是力量&#xff0c;十天前我们还…

java如何找重复数字_Java如何找出数组中重复的数字

题目描述&#xff1a;找出数组中重复的数字&#xff0c;具体内容如下在一个长度为n的数组里的所有数字都在 0~n-1的范围内。数组中某些数字是重复的&#xff0c;但不知道有几个数字是重复的&#xff0c;也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。例如&…

页面中添加锚点的几种方式

本文档创建时间:2018-11-7 15:52:28 方法一,使用a标签添加 通过设置a标签的href属性,跳转到页面中指定id标签的位置a标签的href属性值前要增加#来作为标识,表示是在当前页面的内部跳转 简单的案例: 1 <html>2 <head></head>3 <body>4 <!--设置锚点…

休眠事实:有利于双向集vs列表

Hibernate是一个很棒的ORM工具&#xff0c;它极大地简化了开发&#xff0c;但是如果您想正确地使用它&#xff0c;则有很多陷阱。 在大中型项目中&#xff0c;具有双向父子关联非常常见&#xff0c;这使我们能够浏览给定关系的两端。 在控制关联的持久/合并部分时&#xff0c…

ue正则

1 删除含某些内容的行,例:含有PTTAddress 使用替换功能&#xff0c;勾选正则表达式(Regular Expressions)&#xff0c;查找为%*PTTAddress*^p&#xff0c;替换为空 2.替换大写字母为_大写字母 替换功能&#xff0c;查找为 ^([A-Z]^)&#xff0c;替换为 _^1转载于:https://www.c…

20 存储过程

一、存储过程的定义 存储过程是存储在数据库目录中的一坨的声明性SQL语句。 Java&#xff0c;Python&#xff0c;PHP等应用程序可以调用存储过程。 MySQL是最受欢迎的开源RDBMS&#xff0c;被社区和企业广泛使用。 然而&#xff0c;在它发布的第一个十年期间&#xff0c;它不支…

微信小程序下拉框

微信小程序组件里没有下拉框&#xff0c;正好要用到&#xff0c;记下来以后参考 wxml代码 <view classtop><view classtop-text> 选择接收班级</view><!-- 下拉框 --><view classtop-selected bindtapbindShowMsg><text>{{grade_name}}&l…

int最大值java_Java 中一个int型数组的求最大值最小值 | 学步园

小友今日看单元测试&#xff0c;发现的一个测试用例的代码。而测试的是某个类的最大值&#xff0c;最小值方法。在此把测试类发上来。保留此地&#xff0c;如有人对此有兴趣&#xff0c;看以看下。闲话少说&#xff1a;public class MaxMinTool {public static int getMax(int[…

使用Maven实施自定义JSF 2.0组件

前一段时间&#xff0c;我编写了自己的定制JSF组件。 但是在那个时候&#xff0c;JSF 1.0仍然是最新的&#xff0c;并且该项目没有使用maven作为构建系统。 因此&#xff0c;我一直想用maven编写一个自定义JSF2组件。 因此&#xff0c;让我们开始&#xff1a; 首先&#xff0c…

python2.7.5-虚拟环境搭建

virtualenv可以搭建虚拟且独立的python运行环境, 使得单个项目的运行环境与其它项目独立起来. virtualenv本质上是个python包, 使用pip安装: pip install virtualenv 在新建工作目录下创建虚拟环境: ~$virtualenv TestEnv 默认情况下, 虚拟环境中不包括系统的site-packages, 若…

CSS 高度(css height)

DIV CSS height高度知识教程篇 DIV CSS高度简介这里的CSS高度是指通过CSS来控制设置对象的高度。使用CSS属性单词height。单位可以使用PX&#xff0c;em等常用使用PX&#xff08;像素&#xff09;为html单位。 height高度目录height高度语法高度用法html原始高度设置css高度hei…

fst java_java快速序列化库FST

FST fast-serialization 是重新实现的 Java 快速对象序列化的开发包。序列化速度更快(2-10倍)、体积更小&#xff0c;而且兼容 JDK 原生的序列化。要求 JDK 1.7 支持。Maven&#xff1a;12 de.ruedigermoeller3 fst4 1.365示例代码&#xff1a;01// ! reuse this Object, it ca…