首页 > 代码库 > Ajax-05 使用XMLHttpRequest和jQuery实现Ajax实例
Ajax-05 使用XMLHttpRequest和jQuery实现Ajax实例
需求:
(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)
测试结果如:
Ajax-05 使用XMLHttpRequest和jQuery实现Ajax实例
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。