普通ajax案例：

views.py

  1. def testajax(request):
  2.     h = request.POST.get('hostname')   #拿到ajax传来的值
  3.     i = request.POST.get('ip')
  4.     p = request.POST.get('port')
  5.     b = request.POST.get('b_id')
  6.     if h and len(h) < 5:    #如果为空和长度小于5
  7.         models.Host.objects.create(hostname=h,ip=i,port=p,b_id=b)  #存入主机表信息
  8.         return HttpResponse('OK')　　　　　　　　　　　　　　　　　　　　 #存入成功返回‘OK’
  9.     else:
  10.         return HttpResponse('fail')　　　　　#不成功返回‘fail’　　　　　　　　　　　　　

HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .hide{
  8.             display: none;
  9.         }
  10.         .shade{
  11.             position: fixed;
  12.             top: 0;
  13.             right: 0;
  14.             left: 0;
  15.             bottom: 0;
  16.             background: black;
  17.             opacity: 0.6;
  18.             z-index: 100;
  19.         }
  20.         .add-modal{
  21.             position: fixed;
  22.             height: 300px;
  23.             width: 400px;
  24.             top: 100px;
  25.             left: 50%;
  26.             z-index: 101;
  27.             border: 1px solid black;
  28.             background: white;
  29.             margin-left: -200px;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <h1>主机信息</h1>
  35.     <div>
  36.         <input type="button" id="add_host" value="添加"/>
  37.     </div>
  38.     <table border="1">
  39.         <thead>
  40.             <tr>
  41.                 <th>序号</th>
  42.                 <th>主机名</th>
  43.                 <th>IP</th>
  44.                 <th>端口</th>
  45.                 <th>业务线ID</th>
  46.                 <th>业务线名称</th>
  47.             </tr>
  48.         </thead>
  49.         <tbody>
  50.               {% for row in v1 %}
  51.                   <tr host-id="{{ row.id }}" bid="{{ row.b_id }}">
  52.                       <td>{{ forloop.counter }}</td>
  53.                     <td>{{ row.hostname }}</td>
  54.                     <td>{{ row.ip }}</td>
  55.                     <td>{{ row.port }}</td>
  56.                     <td>{{ row.b_id }}</td>
  57.                     <td>{{ row.b.caption }}</td>
  58.                   </tr>
  59.                {% endfor %}
  60.         </tbody>
  61.     </table>
  62.  
  63.     <div class="shade hide"></div>
  64.     <div class="add-modal hide">
  65.         <form action="/host" method="POST">
  66.             <div class="group">
  67.                 <input type="text" id="host" placeholder="主机名" name="hostname"/>
  68.             </div>
  69.             <div class="group">
  70.                 <input type="text" id="ip" placeholder="IP" name="ip"/>
  71.             </div>
  72.             <div class="group">
  73.                 <input type="text" id="port" placeholder="端口" name="port"/>
  74.             </div>
  75.             <div class="group">
  76.                 <select id="sel" name="b_id">
  77.                     {% for op in b_list %}
  78.                         <option value="{{ op.id }}">{{ op.caption }}</option>
  79.                     {% endfor %}
  80.                 </select>
  81.             </div>
  82.             <input type="submit" value="提交"/>
  83.             <input type="button" id="cancel" value="取消"/>
  84.         </form>
    　　　# ajax提交按钮，id为ajax_submit在JS中进行判断
  85.    <input type="button" value="ajaxtijiao" id="ajax_submit" style="display: inline-block;padding: 5px;background: blue;color: black;"/>
  86.     </div>
  87.     <script src="static/js/jquery.min.js"></script>
  88.     <script>
  89.         $(function() {
  90.             $('#add_host').click(function(){
  91.                 $('.shade,.add-modal').removeClass('hide');
  92.             });
  93.             $('#cancel').click(function(){
  94.                 $('.shade,.add-modal').addClass('hide');
  95.             });
  96.         })
  97.         $('#ajax_submit').click(function(){  #判断标签‘ajax_submit’的ajax提交事件
  98.             $.ajax({
  99.                 url: "/testajax",    #提交的url
  100.                 type: "POST",　　　　　#提交方式 POST|GET
  101.                 data: {'hostname': $('#host').val(), 'ip': $('#ip').val(), 'port': $('#port').val(),'b_id': $('#sel').val()}, #提交的数据
  102.                 success: function(data) {  #返回的函数
  103.                     if(data == "OK"){      #如果返回OK
  104.                         location.reload();  #重新加载本网页（刷新）
  105.                     }else{
  106.                         alert(data);　　　　#不然返回一个弹出框
  107.                     }
  108.                 }
  109.             })
  110.         })
  111.  
  112.     </script>
  113. </body>
  114. </html>

　　

ajax回传json数据：

views.py

  1. def testajax(request):
  2.     import json　　　　　　　　　　　　　　　#导入json包　　　　　
  3.     ret = {'status': True, 'error': None, 'data': None}　　　　　　#json格式的字符串序列
  4.     try:　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　#使用try来捕获错误
  5.         h = request.POST.get('hostname')
  6.         i = request.POST.get('ip')
  7.         p = request.POST.get('port')
  8.         b = request.POST.get('b_id')
  9.         if h and len(h) > 5:
  10.             models.Host.objects.create(
  11.                 hostname=h,
  12.                 ip=i,
  13.                 port=p,
  14.                 b_id=b)
  15.         else:
  16.             ret['status'] = False　　　　　#往字符串中写入错误字段
  17.             ret['error'] = "太短了"
  18.     except Exception as e:　　　　　　　　#报错字段
  19.         ret['status'] = False　　　　　　#往字符串中写入错误字段
  20.         ret['error'] = "请求错误"
  21.     return HttpResponse(json.dumps(ret))   #使用json工具把json格式转换成为字符串

HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .hide{
  8.             display: none;
  9.         }
  10.         .shade{
  11.             position: fixed;
  12.             top: 0;
  13.             right: 0;
  14.             left: 0;
  15.             bottom: 0;
  16.             background: black;
  17.             opacity: 0.6;
  18.             z-index: 100;
  19.         }
  20.         .add-modal{
  21.             position: fixed;
  22.             height: 300px;
  23.             width: 400px;
  24.             top: 100px;
  25.             left: 50%;
  26.             z-index: 101;
  27.             border: 1px solid black;
  28.             background: white;
  29.             margin-left: -200px;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <h1>主机信息</h1>
  35.     <div>
  36.         <input type="button" id="add_host" value="添加"/>
  37.     </div>
  38.     <table border="1">
  39.         <thead>
  40.             <tr>
  41.                 <th>序号</th>
  42.                 <th>主机名</th>
  43.                 <th>IP</th>
  44.                 <th>端口</th>
  45.                 <th>业务线ID</th>
  46.                 <th>业务线名称</th>
  47.             </tr>
  48.         </thead>
  49.         <tbody>
  50.               {% for row in v1 %}
  51.                   <tr host-id="{{ row.id }}" bid="{{ row.b_id }}">
  52.                       <td>{{ forloop.counter }}</td>
  53.                     <td>{{ row.hostname }}</td>
  54.                     <td>{{ row.ip }}</td>
  55.                     <td>{{ row.port }}</td>
  56.                     <td>{{ row.b_id }}</td>
  57.                     <td>{{ row.b.caption }}</td>
  58.                   </tr>
  59.                {% endfor %}
  60.         </tbody>
  61.     </table>
  62.  
  63.     <div class="shade hide"></div>
  64.     <div class="add-modal hide">
  65.         <form action="/host" method="POST">
  66.             <div class="group">
  67.                 <input type="text" id="host" placeholder="主机名" name="hostname"/>
  68.             </div>
  69.             <div class="group">
  70.                 <input type="text" id="ip" placeholder="IP" name="ip"/>
  71.             </div>
  72.             <div class="group">
  73.                 <input type="text" id="port" placeholder="端口" name="port"/>
  74.             </div>
  75.             <div class="group">
  76.                 <select id="sel" name="b_id">
  77.                     {% for op in b_list %}
  78.                         <option value="{{ op.id }}">{{ op.caption }}</option>
  79.                     {% endfor %}
  80.                 </select>
  81.             </div>
  82.             <input type="submit" value="提交"/>
  83.             <input type="button" id="cancel" value="取消"/>
  84.         </form>
  85.                 <input type="button" value="ajaxtijiao" id="ajax_submit"
  86.                    style="display: inline-block;padding: 5px;background: blue;color: black;"/>
    　　　　　　　　　　<span id="error_msg" style="color: red"></span>
  87.     </div>
  88.     <script src="static/js/jquery.min.js"></script>
  89.     <script>
  90.         $(function() {
  91.             $('#add_host').click(function(){
  92.                 $('.shade,.add-modal').removeClass('hide');
  93.             });
  94.             $('#cancel').click(function(){
  95.                 $('.shade,.add-modal').addClass('hide');
  96.             });
  97.         })
  98.         $('#ajax_submit').click(function(){
  99.             $.ajax({
  100.                 url: "/testajax",
  101.                 type: "POST",
  102.                 data: {'hostname': $('#host').val(), 'ip': $('#ip').val(), 'port': $('#port').val(),
  103.                     'b_id': $('#sel').val()},
  104.                 success: function(data) {
  105.                        # console.log(data);    #获得回传数据，在console中打印出来
    　　　　　　　　　　　　　　var obj = JSON.parse(data); #将字符串转换成为json格式 JSON.stringify():将json格式转换成为字符串  
    　　　　　　　　　　　　　　if(obj.status){        #取出json中status字段
    　　　　　　　　　　　　　　　　　　location.reload();
    　　　　　　　　　　　　　　}else{
    　　　　　　　　　　　　　　　　$('#error_msg').text(obj.error);　#取出 error字段并打印在标签‘error_msg’中
    　　　　　　　　　　　　　　}　　　　　　　　　　　　
  106.                 }
  107.             })
  108.         })
  109.  
  110.     </script>
  111. </body>
  112. </html>

打印结果：

传递过来的json字符串，console打印出来了

使用ajax时最好使用 HttpResponse(json.dumps(data))返回一个字符串使用前端JSON.parse转换成为json格式在调用

不要使用render和redirect返回数据

案例：

  1. $.ajax({
        data: $('#edit_form').serialize()；    #实现一句话提交数据，不用再写很多的对应关系
    })

Django-website 程序案例系列-6 ajax案例的更多相关文章

  1. js调用ajax案例

    js调用ajax案例 测试地址:http://www.w3school.com.cn/tiy/t.asp?f=ajax_get 嵌入下面代码,点击提交,再点击请求数据.就可以看到结果了. <ht ...

  2. ajax案例_校验用户名

    目录 ajax案例_校验用户名 代码下载 需求 流程 搭建环境 开发代码 1_jsp 1_servlet 1_service.dao 2_servlet 2_jsp 测试后,功能实现,完结撒花 aja ...

  3. 性能分析（2）- 应用程序 CPU 使用率过高案例

    性能分析小案例系列,可以通过下面链接查看哦 https://www.cnblogs.com/poloyy/category/1814570.html 系统架构背景 其中一台用作 Web 服务器,来模拟 ...

  4. Spark RDD/Core 编程 API入门系列 之rdd案例（map、filter、flatMap、groupByKey、reduceByKey、join、cogroupy等）（四）

    声明: 大数据中,最重要的算子操作是:join  !!! 典型的transformation和action val nums = sc.parallelize(1 to 10) //根据集合创建RDD ...

  5. Django学习 之后端视图与ajax

    一.Ajax简介 在此之前你一定需要先学习下JavaScript JSON 可见: 前端学习 之 JavaScript 之 JSON 1.简单介绍 我们以前知道的前端向后端发送数据的方式有: GET: ...

  6. ASP.NET4.5Web API及非同步程序开发系列

    ASP.NET4.5Web API及非同步程序开发系列 认识ASP.NET WEB API 他的前身为WCF WEB API用于协助WCF支持RestFul.现在集成进ASP.NET,正式更名为ASP ...

  7. Java基础:String类详解,案例用户登录实现,案例手机号截取实现,案例敏感词替换实现;StringBuilder类详解,StringBuilder和String相互转换,附练习案例.

    1.API 1.1 API概述-帮助文档的使用 什么是API API (Application Programming Interface) :应用程序编程接口 java中的API 指的就是 JDK ...

  8. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  9. [Python] 利用Django进行Web开发系列（二）

    1 编写第一个静态页面——Hello world页面 在上一篇博客<[Python] 利用Django进行Web开发系列(一)>中,我们创建了自己的目录mysite. Step1:创建视图 ...

随机推荐

  1. RF

    大家在日常工作中常常解除RF模块,RF的意思就是:radio frequency的意思,就是无线电波频率的意思. RF射频范围:300KHz-300GHz; 其中小于1000HZ以内的当然是低频: 大 ...

  2. Omi框架学习之旅 - 获取DOM节点 及原理说明

    虽然绝大部分情况下,开发者不需要去查找获取DOM,但是还是有需要获取DOM的场景,所以Omi提供了方便获取DOM节点的方式. 这是官网的话,但是我一直都需要获取dom,对dom操作,所以omi提供的获 ...

  3. 7-(基础入门篇)关于STM32底层程序使用说明

    https://www.cnblogs.com/yangfengwu/p/9357695.html 基础教程源码链接请在淘宝介绍中下载,由于链接很容易失效,如果失效请联系卖家,谢谢 https://i ...

  4. JAVA实现用户的权限管理

    一:写在前面 前两天有个同学问我,那个系统不同的用户登陆不同的页面不同,要写很多个页面啊!而每个用户的在系统中拥有不同的权限,可以访问不同的页面是怎么实现的??那低权限的在浏览器输入高权限的人的url ...

  5. PMS-授权中心

    概述 授权中心用基于角色的访问控制思想(RBAC-Role Based Access Control)来实现各个业务系统的功能权限及数据权限控制.功能权限是指能否进入页面及使用页面上的操作.数据权限控 ...

  6. Log4j使用笔记

            在工作过程中,常常需要查看后台日志,为了更好的记录日志,我们使用Log4j来记录日志. 一.maven依赖的配置         在maven中央库库里找到log4j的java包,添加 ...

  7. 反射反射，程序员的快乐+反射案例：打印和Excel导出

    还是那几句话: 学无止境,精益求精 十年河东,十年河西,莫欺少年穷 学历代表你的过去,能力代表你的现在,学习代表你的将来 看过设计模式的童鞋都知道:反射反射,程序员的快乐!今天我们就利用反射来制作打印 ...

  8. CentOS上yum方式安装配置LNMP

    实验环境 一台最小化安装的CentOS 7.3虚拟机 安装软件包 yum install -y epel-* yum install -y nginx mariadb-server php php-m ...

  9. REST-framework快速构建API--生成Swagger接口文档

    一.Swagger概述 1.引言 当接口开发完成,紧接着需要编写接口文档.传统的接口文档使用Word编写,or一些接口文档管理平台进行编写,但此类接口文档维护更新比较麻烦,每次接口有变更,需要手动修改 ...

  10. slurm用户快速入门手册

    1. 概述2. 架构3. 命令3.1 sacct3.2 sattach3.4 sbatch3.5 sbcast3.6 scancel3.7 scontrol3.8 sinfo3.9 smap3.10 ...