ajax success function_Django:AJAX(二)

3|0jQuery实现的AJAX

最基本的jQuery发送AJAX请求示例:


<!DOCTYPE html>

<html lang="en"> <head>

<meta charset="UTF-8">

<title>Title</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style> .hide { display: none; }

</style> </head> <body>

<p><input type="text" class="user">

<span class="hide" style="color: red">用户名已存在</span></p> <script src="/static/jquery-3.3.1.min.js"></script>

{#下面这一项是基于jQuery的基础上自动给我们的每一个ajax绑定一个请求头信息,类似于form表单提交post数据必须要有的csrf_token一样#} {#否则我的Django中间件里面的校验csrf_token那一项会认为你这个请求不是合法的,阻止你的请求#} <script src="/static/setup_Ajax.js"></script> <script> //给input框绑定一个失去焦点的事件 $('.user').blur(function () { //$.ajax为固定用法,表示启用ajax $.ajax({ //url后面跟的是你这个ajax提交数据的路径,向谁提交,不写就是向当前路径提交 url:'', //type为标定你这个ajax请求的方法 type:'POST', //data后面跟的就是你提交给后端的数据 data:{'username':$(this).val()}, //success为回调函数,参数data即后端给你返回的数据 success:function (data) { ret=JSON.parse(data); if (ret['flag']){ $('p>span').removeClass('hide'); } } }) }); </script> </body> </html>

3|1views.py:


def index(request): if request.method=='POST': ret={'flag':False} username=request.POST.get('username') if username=='JBY': ret['flag']=True import json return HttpResponse(json.dumps(ret)) return render(request,'index.html')

3|2$.ajax参数

data参数中的键值对,如果值值不为字符串,需要将其转换成字符串类型。


$("#b1").on("click", function () { $.ajax({ url:"/ajax_add/", type:"GET", data:{"i1":$("#i1").val(),"i2":$("#i2").val(),"hehe": JSON.stringify([1, 2, 3])}, success:function (data) { $("#i3").val(data); } }) })

4|0JS实现AJAX(了解)


var b2 = document.getElementById("b2"); b2.onclick = function () { // 原生JS var 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); } }; };

5|0AJAX请求如何设置csrf_token

不论是ajax还是谁,只要是向我Django提交post请求的数据,都必须校验csrf_token来防伪跨站请求,那么如何在我的ajax中弄这个csrf_token呢,我又不像form表单那样可以在表单内部通过一句{% csrf_token %}就搞定了......

方式1

通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送。


$.ajax({ url: "/cookie_ajax/", type: "POST", data: { "username": "Tonny", "password": 123456, "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val() // 使用JQuery取出csrfmiddlewaretoken的值,拼接到data中 }, success: function (data) { console.log(data); } })

方式2

通过获取返回的cookie中的字符串 放置在请求头中发送。

注意:需要引入一个jquery.cookie.js插件。


$.ajax({ url: "/cookie_ajax/", type: "POST", headers: {"X-CSRFToken": $.cookie('csrftoken')}, // 从Cookie取csrf_token,并设置ajax请求头 data: {"username": "Q1mi", "password": 123456}, success: function (data) { console.log(data); } })

方式3

或者用自己写一个getCookie方法:


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; } var csrftoken = getCookie('csrftoken');

每一次都这么写太麻烦了,可以使用$.ajaxSetup()方法为ajax请求统一设置。


function csrfSafeMethod(method) { // these HTTP methods do not require CSRF protection return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); } $.ajaxSetup({ beforeSend: function (xhr, settings) { if (!csrfSafeMethod(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrftoken); } } });

将下面的文件配置到你的Django项目的静态文件中,在html页面上通过导入该文件即可自动帮我们解决ajax提交post数据时校验csrf_token的问题,(导入该配置文件之前,需要先导入jQuery,因为这个配置文件内的内容是基于jQuery来实现的)

更多细节详见:Djagno官方文档中关于CSRF的内容

5|1练习(用户名是否已被注册)

功能介绍

在注册表单中,当用户填写了用户名后,把光标移开后,会自动向服务器发送异步请求。服务器返回这个用户名是否已经被注册过。

案例分析

  • 页面中给出注册表单;
  • 在username input标签中绑定onblur事件处理函数。
  • 当input标签失去焦点后获取 username表单字段的值,向服务端发送AJAX请求;
  • django的视图函数中处理该请求,获取username值,判断该用户在数据库中是否被注册,如果被注册了就返回“该用户已被注册”,否则响应“该用户名可以注册”。

答案就在前面的示例中,看你能不能找到了......

6|0序列化

6|1Django内置的serializers

什么意思呢?就是我的前段想拿到由ORM得到的数据库里面的一个个用户对象,我的后端想直接将实例化出来的数据对象直接发送给客户端,那么这个时候,就可以用Django给我们提供的序列化方式


def ser(request): #拿到用户表里面的所有的用户对象 user_list=models.User.objects.all() #导入内置序列化模块 from django.core import serializers #调用该模块下的方法,第一个参数是你想以什么样的方式序列化你的数据 ret=serializers.serialize('json',user_list) return HttpResponse(ret)

a9188444b506b95614f52104d138d479.png

7|0补充一个SweetAlert插件示例

94872bd419e3ce730b1d616733d6d00f.gif

$("#b55").click(function () { swal({ title: "你确定要删除吗?", text: "删除可就找不回来了哦!", type: "warning", showCancelButton: true, // 是否显示取消按钮 confirmButtonClass: "btn-danger", // 确认按钮的样式类 confirmButtonText: "删除", // 确认按钮文本 cancelButtonText: "取消", // 取消按钮文本 closeOnConfirm: false, // 点击确认按钮不关闭弹框 showLoaderOnConfirm: true // 显示正在删除的动画效果 }, function () { var deleteId = 2; $.ajax({ url: "/delete_book/", type: "post", data: {"id": deleteId}, success: function (data) { if (data.code === 0) { swal("删除成功!", "你可以准备跑路了!", "success"); } else { swal("删除失败", "你可以再尝试一下!", "error") } } }) }); })

上面这个二次确认的动态框样式,你也可以直接应用到你的项目中

提醒事项:

1.上述的样式类部分渲染的样式来自于bootstrap中,所有建议在使用上述样式时,将bootstrap的js和css也导入了,这样的情况下,页面效果就不会有任何问题

2.弹出的上述模态框中,可能字体会被图标掩盖一部分,可通过调整字体的上外边距来解决

补充:

3dec435b40f333fc9b2dc80a159e9cf6.png

149ffe88abdb1115829f3367f4ac200b.png

如下:

bd32e69e1023879d6f67e4b63a6a574a.png

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

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

相关文章

无废话ExtJs 入门教程十[单选组:RadioGroup、复选组:CheckBoxGroup]

继上一节内容&#xff0c;我们在表单里加了个一个单选组&#xff0c;一个复选组: 1.代码如下&#xff1a; 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2 <ht…

[html] 举例说明写一个button的按钮的方法有哪些?

[html] 举例说明写一个button的按钮的方法有哪些&#xff1f; 使用 标签 其值直接写在标签内使用input标签 type为 buttton 值需要通过用 value""的形式写出来个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。…

iou画 yolov3_yolov3环境配置训练及优化

科普gcc/g: - GNU project C and C compiler.When you compile C programs, you should invoke GCC as g instead.Cuda:GPU Accelerated Computing with C and C一、Ubuntucudacudnnopencvdarknet/yolov3环境配置1.NVIDIA显卡驱动安装首先查看系统是否已经安装NVIDIA驱动&#…

第十三章 Perl的面向对象编程

第十三章 Perl的面向对象编程 by flamephoenix 一、模块简介 二、Perl中的类 三、创建类 四、构造函数 实例变量五、方法 六、方法的输出 七、方法的调用 八、重载 九、析构函数 十、继承 十一、方法的重载 十二、Perl类和对象的一些注释 本章介绍如何使用Perl的面向对象编…

python抢票代码_GitHub标星超12K,抢票神器大更新,支持候补

掐指一算&#xff0c;距离国庆黄金周还有半个月的时间!你出行的车票都抢到了吗?图片来自 pexels根据国务院办公厅发布的关于 2019 年部分节假日安排的通知&#xff0c;国庆放假安排是&#xff1a;10 月 1 日至 7 日。想要十一出行的小伙伴们&#xff0c;想必前几天刚经历了一波…

[html]HTML5如何隐藏video元素的控制栏、全屏按钮?

[html]HTML5如何隐藏video元素的控制栏、全屏按钮&#xff1f; 将<video width"800px" height"400px" id"vid" src"a.mp4" controls"controls"> 中的controls"controls"删掉个人简介 我是歌谣&#xff0c…

c语言冒泡排序法程序填空_【C语言】两种方式实现冒泡排序算法

题目要求编写一个C语言程序,实现基本的冒泡排序算法.算法冒泡排序,用一句话来总结:一组数中,相邻的两个数进行比较、交换,将最大(小)数交换至尾(首)部,即完成了一次冒泡排序要想对N个数字进行排序,循环N次即可.如果真的不理解冒泡排序算法,请点击:冒泡排序_360百科核心代码//方…

python 开发板 播放音乐_MicroPython开发板:TPYBoard v102 播放音乐实例

0x00前言 前段时间看到TPYBoard的技术交流群&#xff08;群号&#xff1a;157816561&#xff09;里有人问关于TPYBoard播放音乐的问题。最近抽空看了一下文档介绍&#xff0c;着手做了个实验。 0x01实验器材 TPYBoard v102 开发板 1块 耳机或音响 1个 杜邦线 若干 0x02前期准备…

【转】选择适当的NFC标签类型

来自&#xff1a; Innovision 研究技术有限公司 目录 1. 简介 3 2. NFC的主要应用 4 3. NFC的规定标签类型 5 4. 选择适当的标签 6 5. 小结 11 6. 术语表 12 1. 简介 近场通信(NFC)适用于非常广泛的一系列应用。构建于现有系统和人类行为的基础上&#xff0c;NFC使人们的生活变…

[html] 你知道什么是粘性布局吗?

[html] 你知道什么是粘性布局吗&#xff1f; 中文大概意思&#xff1a; 对象在常态时遵循常规流。它就像是relative和fixed的合体&#xff0c;当在屏幕中时按常规流排版&#xff0c;当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。 个人简介 我是歌…

奥维地图导入西安坐标_奥维地图导入坐标样式 奥维地图批量导入经纬度坐标...

奥维地图坐标导入哪个文件夹&#xff1f;两个办法&#xff1a;  如果想导出到电脑版奥维地图里&#xff0c;可以采用同步到云端再下载到本地的办法解决。如果要作为数据文件保存到电脑里&#xff0c;可以按以下办法操作&#xff1a;  更多——数据管理——导入导出标记——…

kafka streams实战 pdf_spring框架实战口试材料

Spring框架自诞生倚赖从来备受开发者青睐&#xff0c;有人亲切的称之为&#xff1a;Spring 百口桶。它包SpringMVC、SpringBoot、Spring Cloud、Spring Data等处理方案。好多研发职员把spring看作心目中最佳的java项目&#xff0c;没有之一。Spring系列包涵非常多的项目&#x…

RTTI 简明

RTTI(Run-Time Type Identification)并不是什么新的东西,早在1993年,Bjarne Stroustrup已经提出了RTTI的相关的功能建议. 什么是RTTI? 在C 环境中﹐头文件(header file) 含有类之定义(class definition)亦即包含有关类的结构资料(representational information)。但是﹐这…

jquery日期插件_AngularJS 日期时间选择组件(附详细使用方法)

插件简介AngularJS是一款目前非常火的JavaScript脚本库&#xff0c;应用范围十分广阔。今天给大家分享一款基于AngularJS和jQuery的日期时间选择组件&#xff0c;和别的日期选择插件一样&#xff0c;它同样支持年月日的快速定位。另外这款AngularJS日期选择组件还支持时间的选择…

[html] android手机的微信H5弹出的软键盘挡住了文本框,如何解决?

[html] android手机的微信H5弹出的软键盘挡住了文本框&#xff0c;如何解决&#xff1f; window.addEventListener("resize", function () {if (document.activeElement.tagName "INPUT" || document.activeElement.tagName "TEXTAREA") {wind…

SecureCRT 全屏切换

使用 ALTEnter 键进行全屏和取消全屏的切换转载于:https://www.cnblogs.com/flyme/archive/2012/07/04/2575716.html

python知识图谱可视化_知识图谱可视化

## 人物关系知识图谱#### 一、背景将结构化数据通过关系预处理程序处理为图数据库可以查询的数据&#xff0c;示例是将其中一部分(人物关系数据)可视化表示。#### 二、用到的技术技术点&#xff1a;图数据库Neo4j&#xff0c;d3.js&#xff0c;java&#xff0c;css&#xff0c;…

[html] 编写一个布局,让文字环绕在图片的周围

[html] 编写一个布局&#xff0c;让文字环绕在图片的周围 让图片 float 就可以了&#xff0c;如果还想要实现文字圆形环绕图片的效果&#xff0c;可以使用 shape-outside: circle(); 属性个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c;…

[html] input上传文件可以同时选择多张吗?怎么设置?

[html] input上传文件可以同时选择多张吗&#xff1f;怎么设置&#xff1f; <input type"file" multiple />个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关…

My97DatePicker详细说明

js 时间插件 http://www.mysuc.com/test/My97DatePicker/#m311转载于:https://www.cnblogs.com/guyg/archive/2012/07/06/2579623.html