需求：

（django）使用XMLHttpRequest和jQuery实现Ajax加法运算

url.py:

  1. from django.conf.urls import url
  2. from hello import views
  3.  
  4. urlpatterns = [
  5.     url(r'add/', views.add, name='add'),
  6.     url(r'add_number/', views.add_number, name='add_number'),
  7.  
  8. ]

add.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <h1>XMLHttpRequest-Ajax请求</h1>
  9. <input type="button" onclick="XmlRequest();" value="发送请求">
  10.  
  11. <h1>jQuery-Ajax请求</h1>
  12. <input type="button" onclick="JqRequest();" value="发送请求">
  13.  
  14. <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  15. <script type="text/javascript">
  16.     function XmlRequest() {
  17.         var xhr = new XMLHttpRequest();
  18.         // 定义回调函数
  19.         xhr.onreadystatechange = function () {
  20.             if (xhr.readyState == 4) {
  21.                 //已经接收到全部响应数据，执行以下操作
  22.                 var data = xhr.responseText;
  23.                 console.log(data);
  24.             }
  25.         };
  26.         // 指定连接方式和地址--文件方式
  27.         xhr.open('POST', {% url 'add_number' %}, true);
  28.         // 设置请求头
  29.         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
  30.         // 发送请求
  31.         xhr.send('n1=2;n2=4;');
  32.     }
  33.  
  34.     function JqRequest() {
  35.         $.post({
  36.             url: {% url 'add_number' %},
  37.             data: {"n1": 222, "n2": 444},
  38.             dataType: 'text',
  39.             success: function (data, statusText, xmlHttpRequest) {
  40.                 console.log(data);
  41.             }
  42.         });
  43.  
  44.     }
  45. </script>
  46. </body>
  47. </html>

views.py

  1. from django.http import HttpResponse
  2. from django.shortcuts import render
  3. from django.views.decorators.csrf import csrf_exempt
  4.  
  5. def add(request):
  6.     return render(request, 'add.html')
  7.  
  8. @csrf_exempt
  9. def add_number(request):
  10.     method = request.method
  11.     n1 = request.POST.get('n1')
  12.     n2 = request.POST.get('n2')
  13.     result = int(n1) + int(n2)
  14.  
  15.     content = '{"method":%s,"result":%s}' % (method, result)
  16.     return HttpResponse(content)

测试结果如：

***微信扫一扫，关注“python测试开发圈”，了解更多测试教程！***

***微信扫一扫，关注“python测试开发圈”，了解更多测试教程！***

Ajax-05 使用XMLHttpRequest和jQuery实现Ajax实例的更多相关文章

  1. 通过XMLHttpRequest和jQuery实现ajax的几种方式

    AJAX大家已经都知道了,是为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,Jquery,Css……)重新融合的一个新的知识框架.而,XMLHttpR ...

  2. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax

    基本介绍 XmlHttpRequest XmlHttpRequest是JavaScript中原生的,历史悠久的一种发送网络请求的方案. 基本上所有前端框架对于网络请求的部分都是基于它来完成的. 在本章 ...

  3. Ajax请求（二）--JQuery的Ajax请求方法

    JQuery库的Ajax请求的几种方法: 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. 参数含义: url (String ...

  4. 详解Ajax请求（三）——jQuery对Ajax的实现及serialize()函数对于表单域控件参数提交的使用技巧

    原生的Ajax对于异步请求的实现并不好用,特别是不同的浏览器对于Ajax的实现并不完全相同,这就意味着你使用原生的Ajax做异步请求要兼顾浏览器的兼容性问题,对于java程序员来讲这是比较头疼的事情, ...

  5. 详细解读Jquery各Ajax函数

    $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callba ...

  6. Angular和jQuery的ajax请求的差别

    近期项目中使用angular,结果发现后台没法获取參数,所以,略微研究了一下两者在发送ajax时的差别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释con ...

  7. jQuery 与 Ajax 的应用

    Ajax 全称为 "Asynchronous JavaScript and XML"(异步 JavaScript 和 XML ),它并不是指一种单一的技术,而是有机地利用了一系列交 ...

  8. Ajax学习（二）：模仿jQuery的Ajax封装工具

    通过上一节的学习,基本了解Ajax的使用, 但是这样使用很麻烦,这里封装ajax为一个方法,作为一个ajax工具,传入相应参数就可以实现ajax的使用. 模仿jQuery的Ajax. 如下是jQuer ...

  9. 利用jquery的ajax实现跨域，内部其实是jsonp协议了，不是XHRhttp协议

    一.同源策略 要理解跨域,先要了解一下“同源策略”.所谓同源是指,域名,协议,端口相同.所谓“同源策略“,简单的说就是基于安全考虑,当前域不能访问其他域的东西. 一些常见的是否同源示例可参照下表: 在 ...

随机推荐

  1. <2014 04 29> *nix环境编程常用库总结

    -------------------------linux常用头文件如下:POSIX标准定义的头文件<dirent.h>        目录项<fcntl.h>        ...

  2. 剑指Offer——二维数组中的查找

    题目描述: 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 分析: 因为二维数组 ...

  3. java 链表常见题目

    如何判断单链表是否存在环 方法一.穷举遍历方法一:首先从头节点开始,依次遍历单链表的每一个节点.每遍历到一个新节点,就从头节点重新遍历新节点之前的所有节点,用新节点ID和此节点之前所有节点ID依次作比 ...

  4. 用python简便地抓取刘昊然的写真（17行代码）

    17行python代码抓取刘昊然图片之家的写真 用python来爬取网页信息是很简便的.因为它有很多库来帮助我们实现我们想要的功能.本实验用到的库有:requests和bs4中的BeautifulSo ...

  5. go——基本类型

    Go有许多预定义类型,这里简单把它们分为基本类型和高级类型.下面是基本类型列表: Go的基本类型共有18个,其中int和uint的实际宽度会根据计算架构的不同而不同.在386计算架构下,它的宽度为32 ...

  6. Java集合（7）：HashMap

    一.HashMap介绍 HashMap是基于哈希表的 Map 接口的实现,以key-value的形式存在.在HashMap中,key-value总是会当做一个整体来处理,系统会根据hash算法来来计算 ...

  7. 错误：未启用当前数据库的SQL Server Service Broker，因此查询通知不受支持。如果希望使用通知，请为此数据库启用 Service Broker。

    解决方法: 打开SQL Server,新建查询: ALTER DATABASE 数据库名 SET NEW_BROKER WITH ROLLBACK IMMEDIATE;ALTER DATABASE 数 ...

  8. Python Tornado框架（TCP层）

    Tornado在TCP层里的工作机制 上一节是关于应用层的协议 HTTP,它依赖于传输层协议 TCP,例如服务器是如何绑定端口的?HTTP 服务器的 handle_stream 是在什么时候被调用的呢 ...

  9. mybatis 复习笔记01

    本文内容转自传智播客笔记 1. 问题总结  1). 数据库连接,使用时就创建,不使用立即释放,对数据库进行频繁连接开启和关闭,造成数据库资源浪费,影响 数据库性能. 设想:使用数据库连接池管理数据库连 ...

  10. react className 样式控制

    1.<div className={ "formbox " + this.state.classArr }></div> 2. this.state.cla ...