Ajax

　　很多时候，我们在网页上请求操作时，不需要刷新页面。实现这种功能的技术就要Ajax！（本人定义，不可迷信）

jQuery中的ajax就可以实现不刷新页面就能向后台请求或提交数据的功能，我们仍然用它来做django中的ajax，所以先把jquey下载下来，版本越高越好。

一、ajax发送简单数据类型：


html代码：在这里我们仅发送一个简单的字符串

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <input type="button" onclick="AjaxSubmit();" value="提交">

 <script src="/static/jquery-1.12.1.min.js"></script>

 <script>

     function AjaxSubmit(){

         var host = '1.1.1.1';

         var port = '1111';

         $.ajax({

             url:"/app01/ajax_submit/",

             type:'POST',

             data:{host:host,port:port},

             success: function (arg) {

             }

         });

     }

 </script>

 </body>

 </html>

django下app里views.py

# coding:utf-8

from django.shortcuts import render,HttpResponse

def ajax_submit(request):

    print request.POST     #客户端发来的数据

    return render(request,'ajax_submit.html')

打印出来的数据样式:

二、ajax发送复杂的数据类型：

html代码：在这里我们仅发送一个列表中包含字典数据类型

由于发送的数据类型为列表 字典的格式，我们提前要把它们转换成字符串形式，否则后台程序接收到的数据格式不是我们想要的类型，所以在ajax传输数据时需要JSON

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <input type="button" onclick="AjaxSubmit_set();" value="提交集合">

 <script src="/static/jquery-1.12.1.min.js"></script>

 <script>

         function AjaxSubmit_set(){

         var data_list = [

             {'name':'chenchao','age':18},

             {'name':'lisi','age':19},

             {'name':'wangwu','age':13}

         ];

         $.ajax({

             url:"/app01/ajax_submit_set/",

             type:'POST',

             tradition:true,   原生模式

             data:{data:JSON.stringify(data_list)},

             success: function (arg) {

             }

         });

     }

 </script>

 </body>

 </html>

django下app里views.py

 def ajax_submit_set(request):

     print request.POST

     return render(request,'ajax_submit.html')

打印出来的数据样式:

三、稍等、还没完。

虽然我们实现了功能，但这还不够，因为显得不是很专业，所以我们稍作处理。

success: function (arg) { }  如果ajax提交数据成功，那么就会自动执行这里面的函数

html代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <input type="button" onclick="AjaxSubmit();" value="提交">

 <input type="button" onclick="AjaxSubmit_set();" value="提交集合">

 <script src="/static/jquery-1.12.1.min.js"></script>

 <script>

     function AjaxSubmit(){

         var host = '1.1.1.1';

         var port = '1111';

         $.ajax({

             url:"/app01/ajax_submit/",

             type:'POST',

             data:{host:host,port:port},

             success: function (arg) {

             }

         });

     }

         function AjaxSubmit_set(){

         var data_list = [

             {'name':'chenchao','age':18},

             {'name':'lisi','age':19},

             {'name':'wangwu','age':13}

         ];

         $.ajax({

             url:"/app01/ajax_submit_set/",

             type:'POST',

             tradition:true,

             data:{data:JSON.stringify(data_list)},

             success: function (arg) {    //如果程序执行成功就会执行这里的函数

                 var callback_dic = $.parseJSON(arg);

                 if(callback_dic.status){

                     alert('成功');

                 }else{

                     alert(callback_dic.error); //把错误的信息从后台提出展示出来

                 }

             }

         });

     }

 </script>

 </body>

 </html>

django下app里views.py

 # coding:utf-8

 from django.shortcuts import render,HttpResponse,redirect

 def ajax_submit(request):

     print request.POST

     return render(request,'ajax_submit.html')

 import json

 def ajax_submit_set(request):

     ret = {'status': True,'error': ""}

     try:

         print request.POS

     except Exception, e:

         ret['status'] = False

         ret['error'] = str(e)

     j_ret = json.dumps(ret)

     return HttpResponse(j_ret)

Django中的Ajax的更多相关文章

  1. django中的ajax组件

    目录 django中的ajax 向服务器发送请求的途径 Ajax的特点 基于jquery实现的ajax请求 利用ajax实现计算器 利用ajax实现登陆认证 利用form表单进行文件上传 利用ajax ...

  2. Django中的Ajax详解

    AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当 ...

  3. django中使用Ajax

    内容: 1.Ajax原理与基本使用 2.Ajax发送get请求 3.Ajax发送post请求 4.Ajax上传文件 5.Ajax设置csrf_token 6.django序列化 参考:https:// ...

  4. django中给ajax提交加上csrf

    代码来自djangoproject网站 在html中的script标签下插入下面代码 在html文档加载时候运行下面代码,并且使用$.ajaxSetup设置ajax每次调用时候传入的数据,$.ajax ...

  5. django 中的 ajax

    (Asynchronous Javascript And XML ) 特点: 异步 页面局部刷新 传递的数据量小 ajax 请求返回数据 重定向 location.href='/index/' 发请求 ...

  6. django中的Ajax文件上传

    主要介绍两个 1.ajax文件上传 2.写路由器 3.创建对应的函数 4.file_put.html代码 <!DOCTYPE html> <html lang="en&qu ...

  7. django中使用AJAX时如何获取表单参数（按钮携带参数）

    前提是函数和相应的视图路由都已经配置好了,然后就是表单了: <form id="SmsForm" method="post" class="a& ...

  8. Django 中CSRF中间件 'django.middleware.csrf.CsrfViewMiddleware',

    1.Django中CSRF中间件的工作原理及form表单提交需要添加{% csrf_token %}防止出现403错误 CSRF # 表示django全局发送post请求均需要字符串验证功能:防止跨站 ...

  9. Django中关于“CSRF verification failed. Request aborted”的问题

    遇到该问题的情境 在Django中采用Ajax提交表单,涉及到跨域问题. 解决措施 在html页面中的表单内添加如下代码: {% csrf_token %} 在视图函数所在的py文件中添加如下代码: ...

随机推荐

  1. OpenCV例程实现人脸检测

    前段时间看的OpenCV,其实有很多的例子程序,参考代码值得我们学习,对图像特征提取三大法宝:HOG特征,LBP特征,Haar特征有一定了解后. 对本文中的例子程序刚开始没有调通,今晚上调通了,试了试 ...

  2. quick-x 触摸事件的新方法

    --[[ local function onTouch(event, x, y) print(event, x, y) if event == "began" then retur ...

  3. 用gtest实现数据驱动的单元测试

    //使用gtest进行数据驱动的单元测试 #include <gtest/gtest.h> #include <iostream> #include <vector> ...

  4. id类型

    id类型 在Objective-C 中,id 类型是一个独特的数据类型.在概念上,类似Java 的Object 类,可以转换为任何数据类型.换句话说,id 类型的变量可以存放任何数据类型的对象.在内部 ...

  5. Entity Framework 实践系列 —— 搞好关系 - 两情相悦（双向一对一）【转载】

    Entity Framework 实践系列 —— 搞好关系 - 两情相悦(双向一对一) 自从搞好了单向一对一关系,装满代码的心中塞进了挥之不去的情丝 —— 单相思.谁都知道音乐世界离不开情感,可谁又知 ...

  6. UI设计网站参考

    1. https://dribbble.com/colors/6A969A 2. 设计师网站导航:http://hao.uisdc.com/ 3. bootstrap的UI:http://www.bo ...

  7. codeforces D. Multiplication Table

    http://codeforces.com/contest/448/problem/D 题意:一个n×m的矩阵,a[i][j]=i*j; 然后把a数组排序,找出第k个数. 思路:1-n×m二分枚举,然 ...

  8. [topcoder]UnsealTheSafe

    http://community.topcoder.com/stat?c=problem_statement&pm=4471&rd=10711 这题果然是道简单题,图+DP.拿道题便觉 ...

  9. Spring Batch系列总括(转载)

    最近一个项目在使用SpringBatch框架做一个电子商务平台的批处理.网上资料很有限,尤其是中文资料更是少之又少,官网上的文档也只是讲一些入门的基础知识,大部分高级特性都是一笔带过,讲解的很不彻底, ...

  10. 重构第三天：提升方法&下移方法

    如果两个子类拥有相同的方法,把它们移动到超类中来 Warning! 但是从子类到父类移动方法的时候要注意, 不要过度采用这种方法,否则会出现继承滥用的情况.如果一个父类A有多个方法,假设m1, m2方 ...