需求：

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

url.py:

from django.conf.urls import url

from hello import views

urlpatterns = [

    url(r'add/', views.add, name='add'),

    url(r'add_number/', views.add_number, name='add_number'),

]

add.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<h1>XMLHttpRequest-Ajax请求</h1>

<input type="button" onclick="XmlRequest();" value="发送请求">

<h1>jQuery-Ajax请求</h1>

<input type="button" onclick="JqRequest();" value="发送请求">

<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">

    function XmlRequest() {

        var xhr = new XMLHttpRequest();

        // 定义回调函数

        xhr.onreadystatechange = function () {

            if (xhr.readyState == 4) {

                //已经接收到全部响应数据，执行以下操作

                var data = xhr.responseText;

                console.log(data);

            }

        };

        // 指定连接方式和地址--文件方式

        xhr.open('POST', {% url 'add_number' %}, true);

        // 设置请求头

        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');

        // 发送请求

        xhr.send('n1=2;n2=4;');

    }

    function JqRequest() {

        $.post({

            url: {% url 'add_number' %},

            data: {"n1": 222, "n2": 444},

            dataType: 'text',

            success: function (data, statusText, xmlHttpRequest) {

                console.log(data);

            }

        });

    }

</script>

</body>

</html>

views.py

from django.http import HttpResponse

from django.shortcuts import render

from django.views.decorators.csrf import csrf_exempt

def add(request):

    return render(request, 'add.html')

@csrf_exempt

def add_number(request):

    method = request.method

    n1 = request.POST.get('n1')

    n2 = request.POST.get('n2')

    result = int(n1) + int(n2)

    content = '{"method":%s,"result":%s}' % (method, result)

    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. 面向对象 - 1.软件开发/2.异常处理/3.try...except的详细用法

    1.软件开发 软件的开发其实一整套规范,我们所学的只是其中的一小部分,一个完整的开发过程,需要明确每个阶段的任务,在保证一个阶段正确的前提下再进行下一个阶段的工作,称之为软件工程 面向对象的软件工程包 ...

  2. Java 语言基础之数组应用

    什么时候使用数组呢? 如果数据出现了对应关系, 而且对应关系的一方是有序的数字编号, 并作为角标使用. 这时,就必须要想到数组的使用. 也就是将这些数据存储到数组中, 根据运算的结果作为角标, 直接去 ...

  3. Qt 如何自动安装常用依赖？

    使用 *.prf 文件自动安装依赖 在 Qt\Qt5.9.5\5.9.5\msvc2015\mkspecs\features 路径中添加 auto_install.prf 文件 然后在程序配置文件(* ...

  4. 我的Android进阶之旅------>解决错误：You need to use a Theme.AppCompat theme (or descendant) with this activity.

    #1.错误描述 今天,想实现Activity不显示标题栏的效果,在项目的AndroidManifest.xml文件,对相应的Activity添加属性 android:theme="@andr ...

  5. Python高级教程-返回函数

    函数作为返回值 高阶函数除了可以接收函数作为参数外,还可以把函数作为结果值返回. 要实现一个可变参数的求和.通常情况下,求和的函数是这样定义的: def calc_sum(*args): ax = 0 ...

  6. 001-es6变量声明、解构赋值、解构赋值主要用途

    一.基本语法 1.1.声明变量的六种方法 参看地址:http://es6.ruanyifeng.com/#docs/let let:局部变量,块级作用域,声明前使用报错 var:全局变量,声明前使用 ...

  7. Android学习十二---在android上实现图像匹配

    一.效果图及功能描述 效果图 点击ShowImg后 点击match,然后点击showmatch,可以不断点击showmatch. 主要功能描述:显示在SD卡上已经存在的图片test.jpg,根据图片在 ...

  8. pycharm断点调试

    step over 执行下一步 蓝色高亮的那一行表示准备执行的代码

  9. python+selenium+API

    一.浏览器操作 1.浏览器最大化 driver.maximize_window() #将浏览器最大化显示 2.设置浏览器宽.高 driver.set_window_size(480, 800)#设置浏 ...

  10. POJ 3463 Sightseeing (次短路)

    题意:求两点之间最短路的数目加上比最短路长度大1的路径数目 分析:可以转化为求最短路和次短路的问题,如果次短路比最短路大1,那么结果就是最短路数目加上次短路数目,否则就不加. 求解次短路的过程也是基于 ...