AJAX

  • 它是js的功能,特点:异步请求,局部刷新

简单请求示例

  • 基于jquery的ajax请求
  • 异步请求,不会刷新页面,页面上用户之前输入的数据都不会丢失
  1. <p>下面是ajax请求</p>
  2. <div>
  3. <label>
  4. 用户名:<input type='text' name='username' id='username'>
  5. </label>
  6. <label>
  7. 密码:<input type='text' name='password' id='password'>
  8. </label>
  9. <button id='btn'>提交</button>
  10. </div>
  11. <script src='/static/js/jquery.js'></script>
  12. <script>
  13. $('#btn').click(function(){
  14. var uname = $('#username').val();#取到input标签输入的值
  15. var pwd = $('#password').val();
  16. $.ajax({
  17. url:'/login_ajax/', #可以是相对路径,可以是绝对路径,浏览器不会跳到这个路径,这是ajax请求发送请求,往哪里发使用的
  18. type:'post', #请求方法
  19. data:{xx:uname,pp:pwd} #ajax请求携带参数和格式
  20. success:function(res){
  21. #success对应的function表示请求成功(正常)之后自动执行的函数
  22. #res名字随便写,res得到的就是响应数据
  23. console.log(res,typeof res);
  24. }
  25. })
  26. })
  27. </script>

完整的一个ajax登录示例

  1. <form action='/login/' method='post'>
  2. 用户名:<input type='text' name='username' value='{{ uanme }}'>
  3. 密码:<input type='text' name='password'>
  4. <button>提交</button>
  5. <span style='color:red;'>{{ error }}</span>
  6. </form>
  7. <p>下面是ajax请求</p>
  8. <div>
  9. <label>
  10. 用户名:<input type='text' uname='username' id='username'>
  11. </label>
  12. <label>
  13. 密码:<input type='text' name='password' id='password'>
  14. </label>
  15. <button id='btn'>提交</button>
  16. <span id='error_msg' style='color:red;font-size:12px;'></span>
  17. </div>
  18. <script src='/static/js/jquery.js'></script>
  19. <script>
  20. $('#btn').click(function(){
  21. var uname = $('#username').val()
  22. var pwd = $('#password').val()
  23. $.ajax({
  24. url:'/login_ajax/',#可以是相对路径,可以是绝对路径
  25. type:'post',
  26. data:{xx:uname,pp:pwd}
  27. success:function(res){
  28. #success对应的function表示请求成功(正常)之后自动执行的函数
  29. #res名字随便写,res得到的就是响应数据
  30. if (res==='ok'){
  31. #登录成功
  32. location.href='/home/',#跳转页面
  33. }else{
  34. #登录失败
  35. $('#error_msg').text('用户名或者密码错误')
  36. }
  37. }
  38. })
  39. })
  40. </script>

注意点

  1. $.ajax({
  2. url:'/login__ajax/',#写路径时,如果后台使用的是django框架,那么url路径的后面的斜杠要加上,如果想不加上斜杠,那么需要在djangosettings配置文件中加上 APPEND_SLASH=False,并且后台的urls.py文件中的路径要和ajax请求路径对应好,该有斜杠写斜杠,不需要写斜杠的,去掉斜杠
  3. })

在js代码中可以使用url别名反向解析来写路径

  1. $.ajax({
  2. url:'{% url 'login_ajax' %}',
  3. type:'post',
  4. data:{xx:uname,oo:pwd}
  5. success:function(res){
  6. ...
  7. }
  8. })
  9. 但是要注意一点,当这段js代码是写到某个js文件中,然后html文件通过script标签的src属性来引入时,你的{% url 'login_ajax' %}语法就不能被模板渲染了,也就是失效了

通过httpresponse响应字典类型数据

  1. list.html文件内容
  2. $('#btn').click(function(){
  3. $.ajax({
  4. url:'/data/',
  5. type:'get',
  6. success:function(res){
  7. console.log(res,typeof res);
  8. //{"name":"xx","hobby":["女","gay"]} 这个是从后台序列化传过来的数据,所以是string类型
  9. var res_dict =JSON.parse(res) //反序列化成字典object
  10. //var hobby = res_dict['hobby']
  11. var hobby = res_dict.hobby; //['女','gay']
  12. console.log(hobby);
  13. //将数据放到li标签中,然后添加到ul标签中进行列表数据展示
  14. for (var i=0;i<res.length;i++){
  15. var content = res[i]
  16. var liStr = `<li>${concent}</li>`
  17. $('ul').append(liStr)
  18. }
  19. }
  20. })
  21. })
  22. views.py文件内容
  23. import json
  24. def data(request):
  25. data_list = {'name':'xx','hobby':['女','gay']}
  26. date_list_str = json.dumps(data_list,ensure_ascii=False)
  27. #ensure_ascii=False把传输过后显示的unicode正常显示为中文
  28. #直接使用HttpResponse回复字典类型数据,那么会将字典里面的元素的键都拼接成一个字符串来响应,所以不是我们想要的结果,所以我们先将字典类型数据,转换成json字符串,在通过HttpResponse来进行响应
  29. return HttpResponse(data_list_str)
  30. urls.py内容如下
  31. url(r'^data/',views.data)

JsonResponse

  1. views.py文件
  2. import json
  3. def data(request):
  4. data_list = {'name':'xx','hobby':['女','gay']}
  5. #第一种方式,直接通过httpresponse回复字典数据,那么ajax接收到数据之后,需要自行反序列化
  6. data_list_str = json.dumps(data_list,ensure_ascii=False)
  7. #直接使用httpresponse回复字典类型数据,那么会将字典里面元素的键都拼接成一个字符串来响应,所以不是我们想要的结果,所以我们先将字典类型数据,转换成json字符串,在通过httpresponse来进行响应
  8. return HttpResponse(data_list_str)
  9. #第二种方式:通过HttpResponse回复字典数据,回复之前,加上一个响应头键值对,如下,那么ajax收到这个响应数据的时候,会查看这个响应头,发现content-type这个响应头的值为application/json,那么会自动对响应数进行反序列化,不需要我们自己手动反序列化了
  10. #手动加上ret['content-type'] ='application/json'响应头
  11. ret = HttpResponse(data_list_str)
  12. ret['content-type'] = 'application/json'
  13. return ret
  14. #第三种方式 JsonResponse
  15. #JsonResponse主要做两件事,1.序列化数据,2.加上['content-type']='application/json'这个响应头键值对
  16. return JsonResponse(data_list)
  17. #三种方式总结:
  18. 第一种需要自己序列化和反序列化,
  19. 第二种需要先序列化,然后加响应头自动反序列化,
  20. 第三种是直接自动序列化和反序列化
  21. 注意点:
  22. hobby_list = ['女','gay']
  23. #当使用JsonResponse回复非字典类型数据时,需要将safe参数的值改为False
  24. return JsonResponse(hobby_list,safe=False)

请求头消息格式分析

  1. 请求消息格式和请求方法没有关系
  2. 和请求头键值对中的这一组键值对有关系
  3. Content-Type:application/x-www-form-urlencoded;//浏览器发送数据ajax或者form表单,默认的格式都是它
  4. 它表示请求携带的数据格式,application/x-www-form-urlencoded对应的数据格式:a=1&b=2
  5. socket 接收到我们请求数据,会分析一下Content-Type: application/x-www-form-urlencoded;这个请求头
  6. # 叫做解析器
  7. if Content-Type == 'application/x-www-form-urlencoded':
  8. data = 'a=1&b=2'
  9. l1 = data.split('&') [a=1,b=2]
  10. for i in l1:
  11. k,v = i.split('=')
  12. if 请求方法 == 'GET':
  13. request.GET[k] = v
  14. elif Content-Type == 'multipart-formdata':
  15. request.FILES
  16. #django没有内置对appcation/json的消息格式的解析器,所以如果请求数据
  17. <script>
  18. $('#sub').click(function () {
  19. var a = $('[name="a"]').val(); #通过name属性找到标签
  20. var b = $('[name="b"]').val();
  21. $.ajax({
  22. url:'/sub/',
  23. {#type:'get',#}
  24. type:'post',
  25. headers:{
  26. 'Content-Type':'application/json',
  27. },
  28. {#data:{aa:a,bb:b},#}
  29. data:JSON.stringify({aa:a,bb:b}),
  30. // /sum/?aa=1&bb=2
  31. // 也就是说,如果请求方法为get,那么data属性中的键值对数据,会自动拼接到请求路径后面,作为查询参数来携带请求数据
  32. success:function (res) {
  33. alert(res);
  34. }
  35. })
  36. })
  37. </script>

django学习第十天---ajax请求和JsonResponse的更多相关文章

  1. Django学习之十: staticfile 静态文件

    目录 Django学习之十: staticfile 静态文件 理解阐述 静态文件 Django对静态文件的处理 其它方面 总结 Django学习之十: staticfile 静态文件 理解阐述     ...

  2. Django 学习第十天——状态保持及表单

    状态保持: 1.http协议是无状态的:每次请求都是一次新的请求,不会记得之前通信的状态 2.客户端与服务器端的一次通信,就是一次会话实现状态保持的方式:在客户端或服务器端存储与会话有关的数据 3.存 ...

  3. Django学习系列之结合ajax

    AJAX简介 什么是AJAX AJAX = 异步JavaScript 和 XML(Asynchronous JavaScript and XML) 通过在后台于服务器进行少量数据交换,AJAX可以使网 ...

  4. JavaScript原生封装ajax请求和Jquery中的ajax请求

    前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步 ...

  5. ajax请求和aspx返回数据

    ajax请求: $(function () {            $.ajax({                url: "index.aspx?method=send",  ...

  6. Django学习之十二:Cache 缓存组件

    目录 Django Cache 缓存组件 缓存逻辑伪代码 配置缓存源 可配置参数说明 01. Django的默认缓存 02. 基于Redis的django-redis 03. 自定义cache 04. ...

  7. 原生ajax请求和jsonp

    1.原生ajax请求 var obj = new XMLHttpRequest(); obj.open("POST", url, true); obj.setRequestHead ...

  8. Django学习之十四:Django ORM继承关系

    目录 Django ORM继承关系 1. SINGLE_TABLE(django好像不支持) 2. TABLE_PER_CLASS 3. JOINED 4. 代理继承 Django ORM继承关系 参 ...

  9. Django之前后端交互使用ajax的方式

    1. 在项目中前后端数据相互是一种常态, 前后端交互使用的是ajax请求和form表单的请求两种方式" ajax与form表单的区别在于: form 是整个页面刷新提交的,  但是ajax ...

  10. Django学习笔记(8)——前后台数据交互实战(AJAX)

    这里将自己这段时间学习的关于前后台数据交互的笔记写在这里,这里包含了Django传输数据给JS,AJAX的相关问题,跨域问题,如何解决AJAX的跨域问题等等.比较凌乱,请看到这篇博客的盆友见谅,如果我 ...

随机推荐

  1. [转帖]linux 磁盘队列深度nr_requests 和 queue_depth

    linux 磁盘队列深度nr_requests 和 queue_depth nr_requests 和 queue_depth 修改配置值 nr_requests 和 queue_depth 区别 i ...

  2. NativeMemoryTracking的再学习

    摘要 最近一段时间学习jvm比较多. 为了能够更加深入的进行一些调优和峰值性能的配置. 看了很多像是NMT,inline,堆区方法区以及分层编译等知识. 但是看到华为毕昇社区说的codecache相关 ...

  3. BMC修改密码

    公司里的服务器都托管出去了, 为了好维护, 都给自己的机器设置了BMC远程管理的端口, 安全起见自己修改了密码. 方法很简单.默认用户密码是 用户:root 密码: root 用户:admin 密码: ...

  4. [官方]Beyond Compare里面 二进制比较的含义.

    Content Comparisons Actions > Compare Contents In the Actions menu, the Compare Contents command ...

  5. Vue3中ref和toRef的区别

    1. ref是复制,视图会更新 如果利用ref将某一个对象中的某一个属性值变成响应式数据 我们修改响应式数据是不会影响原始数据的; 同时视图会跟新. ref就是复制 复制是不会影响原始数据的 < ...

  6. openim支持十万超级大群

    钉钉:根据相关监管要求,新建普通群人数上限调整为500人,不支持群人数扩容. 企业微信:内部群聊人数最多支持2000人,群个数无上限.全员群人数最多支持10000人.企业微信用户创建的外部群人数最多支 ...

  7. 虚幻引擎 4 学习笔记 [1] :蓝图编程 Demo

    虚幻引擎 4 学习笔记 [1] :蓝图编程 Demo ​ 最近学习虚幻引擎,主要看的是 Siki 学院的课,课程链接:Unreal蓝图案例 - 基础入门 - SiKi学院|SiKi学堂 - unity ...

  8. 手撕Vue-数据驱动界面改变中

    经过上一篇的介绍,已经实现了观察者模式的基本内容,接下来要完成的就是将上一篇的发布订阅模式运用到 Nue 中,实现数据驱动界面改变. 在监听数据变化的章节当中,根据指定的区域和数据去编译渲染界面 这个 ...

  9. 基于文心大模型套件ERNIEKit实现文本匹配算法,模块化方便应用落地

    文心大模型,产业级知识增强大模型介绍 官网:https://wenxin.baidu.com/ 项目链接见文末 文心大模型开发套件ERNIEKit,面向NLP工程师,提供全流程大模型开发与部署工具集, ...

  10. C/C++ Qt QThread 线程组件应用

    QThread库是QT中提供的跨平台多线程实现方案,使用时需要继承QThread这个基类,并重写实现内部的Run方法,由于该库是基本库,默认依赖于QtCore.dll这个基础模块,在使用时无需引入其他 ...