Ajax

  • AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
  • AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
  • AJAX 是一种用于创建快速动态网页的技术。
  • 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
  • 传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

目前最常用的就是通过jquery来使用ajax，jquery封装了ajax;

views：

  1. from django.shortcuts import render,HttpResponse,render_to_response
  2.  
  3. # Create your views here.
  4.  
  5. def ajax(request):
  6.  
  7.     if request.method == 'POST':
  8.         print request.POST
  9.         return HttpResponse('ok')
  10.     else:
  11.         return render_to_response('app04/ajax.html')

ajax.html:

  1. </head>
  2. <body>
  3.             <input id="name" type="text"/>
  4.             <input type="button" value="点击执行ajax" onclick="doajax()"/>
  5.  
  6.             <script src="/static/jquery/jquery-3.2.1.js"></script>
  7.             <script type="text/javascript">
  8.                     function doajax() {
  9.                         var temp = $('#name').val();/*获取id等于name的值*/
  10.                         $.ajax({
  11.                             url: '/app04/ajax/',/*请求要发给的URL*/
  12.                             type:'POST',
  13.                             data:{dat:temp},/*要传递的数据*/
  14.                             success:function (arg) {/*这个arg的值就是后台返回的值，ok*/
  15.                                 console.log(arg);
  16.                                 console.log('success');
  17.                             },
  18.                             error:function () {
  19.                                 console.log('failed');
  20.                             },
  21.                         });
  22.                     }
  23.             </script>
  24. </body>

将后台返回的字典给前台并输出：

views：

  1. from django.shortcuts import render,HttpResponse,render_to_response
  2. import json
  3. # Create your views here.
  4.  
  5. def ajax(request):
  6.  
  7.     if request.method == 'POST':
  8.         print request.POST
  9.         data = {'status':0,'msg':'请求成功','data':[11,22,33,44,55]}
  10.         return HttpResponse(json.dumps(data))#将字典生成一个字符串，此时返回的就是字符串
  11.     else:
  12.         return render_to_response('app04/ajax.html')

ajax.html

  1. <body>
  2.             <input id="name" type="text"/>
  3.             <input type="button" value="点击执行ajax" onclick="doajax()"/>
  4.  
  5.             <script src="/static/jquery/jquery-3.2.1.js"></script>
  6.             <script type="text/javascript">
  7.                     function doajax() {
  8.                         var temp = $('#name').val();/*获取id等于name的值*/
  9.                         $.ajax({
  10.                             url: '/app04/ajax/',/*请求要发给的URL*/
  11.                             type:'POST',
  12.                             data:{dat:temp},/*要传递的数据*/
  13.                             success:function (arg) {/*这个arg的值就是后台返回的值，ok*/
  14.                                 var obj = jQuery.parseJSON(arg)
  15.                                 console.log(obj.status);
  16.                                 console.log(obj.data);
  17.                                 console.log(obj.msg);
  18.                                 console.log('success');
  19.                                 $('#name').val(obj.msg)
  20.                             },
  21.                             error:function () {
  22.                                 console.log('failed');
  23.                             },
  24.                         });
  25.                     }
  26.             </script>
  27. </body>

　　

　　

　　

Ajax(django)的更多相关文章

  1. python json ajax django四星聚会

    什么是json: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript Programm ...

  2. Django基础——Form&Ajax篇

    一 Form 在实际的生产环境中,登录和注册时用户提交的数据浏览器端都会使用JavaScript来进行验证(比如验证输入是否为空以及输入是否合法),但是浏览器可能会禁用JavaScirpt,同时也有人 ...

  3. django基础之Ajax、分页、cookie与session

    目录: Ajax之json Ajax简介 jquery实现的ajax js实现的ajax django分页器 COOKIE与SESSION 一.Ajax之json 1.什么是json? 定义: JSO ...

  4. 【Django】AJAX

    目录 JSON 序列化 stringify 反序列化 parse JSON与XML对比 AJAX简介 AJAX常见应用场景 jQuery实现AJAX JS实现AJAX AJAX请求设置csrf_tok ...

  5. Django如何与ajax通信

    示例一 文件结构 假设你已经创建好了一个Django项目和一个App,部分结构如下: mysite myapp |___views.py |___models.py |___forms.py |___ ...

  6. django之ORM的查询优化、Ajax 06

    目录 ORM查询优化 only与defer select_related与prefetch_related查询优化 choices参数 MTV与MVC模型 Ajax简介 AJAX常见应用情景 AJAX ...

  7. Django+Ajax+Mysql实现数据库数据的展示

    最近老师让搞一个系统,仅仅展示一下数据库的数据 在做海底捞时,是交接的师兄的项目,用的语言是java,框架是SSM(Spring.SpringMVC.MyBatis),这次我准备用Python写,前端 ...

  8. Django合集

    Django基础 Django--简介 Django--web框架简介 浅析uWSGI.uwsgi.wsgi Django--url(路由)配置 Django--模板层 Django--视图层 Dja ...

  9. Django - 学习目录

    Django 基础 web应用/http协议/web框架 Django简介 Django - 路由层(URLconf) Django - 视图层 Django - 模板层 Django - 模型层 - ...

随机推荐

  1. element UI 导航栏根据路径来确定默认选中

    <template> <el-menu :default-active="activedMenu($route.path)" class="el-men ...

  2. iOS调用第三方导航和线路规划

    线路规划: https://blog.csdn.net/qq_19979539/article/details/51938995 百度地图:baidumap: 高德地图:iosamap: 腾讯地图:q ...

  3. hung_task_timeout_secs和blocked for more than 120 seconds的解决方法

    Linux系统出现hung_task_timeout_secs和blocked for more than 120 seconds的解决方法 Linux系统出现系统没有响应. 在/var/log/me ...

  4. 添加字体与字符集locale支持（基于busybox文件系统）

    添加字体与字符集(基于busybox文件系统) 2011-10-11 14:07:32 分类: LINUX 1.添加字体 下面以文泉驿为例 $ mkdir  -p  rootfs/usr/share/ ...

  5. wpf（Application 如何创建一个事件，及其Application相关的属性）

    1.如何关闭wpf程序.应用程序的关闭只有调用其shutdown方法才可以.shutdown有三种属性.OnLastWindowClose,OnMainWindowClose,OnExplicitSh ...

  6. 下载隐含的qq音乐

    最终按Ctrl+s .或者点击“下载”即可.格式可能为m4a

  7. iOS - 常用的CG结构体

    CGPoint.CGSize.CGRect.CGRectEdge实际上都是结构体 一,几个常用的结构体 CGPoint   定义一个点,设置x坐标和y坐标 struct CGPoint { CGFlo ...

  8. git bash 命名

    git log -p -2 我们常用 -p 选项展开显示每次提交的内容差异,用 -2 则仅显示最近的两次更新. git diff HEAD git clean -df 恢复到最后一次提交的改动: gi ...

  9. CAAnimationDelegate 代理方法没调用

    CAAnimationDelegate 代理方法没调用 应该在 addAnimation调用之前设置代理

  10. AFN拿不到cookie,无法存储cookie

    跟雅思的项目对比,发现 task.currentRequest.allHTTPHeaderFields 这样不能拿到cookie 应该这样取: NSHTTPURLResponse *response ...