分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

AJAX局部刷新和异步技术

发布时间:2023-09-06 02:14责任编辑:赖小花关键词:暂无标签

用ajax实现简单的局部刷新技术:求乘法

稍微简单的ajax依赖于jQuery 所以首先要导入jQuery包,在写ajax 代码块

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<meta name="viewport" content="width=device-width, initial-scale=1"> 6 ????<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> 7 ????<title>首页</title> 8 </head> 9 <body>10 <h4>这是home页面</h4>11 <input type="text" id="s1">+12 <input type="text" id="s2">=13 <input type="text" id="s">14 <button type="button" id="b1">提交</button>15 <script src="/static/jquery-3.3.1.min.js"></script>16 <script src="/static/bootstrap/js/bootstrap.min.js"></script>17 <script>18 ????$("#b1").on("click",function () {19 ????????$.ajax({20 ????????????url:"/ajax_do/", ???????????????????#对应去执行哪个视图操作21 ????????????type:"GET", ????????????????????????#以哪种方式请求22 ????????????data:{"s1":$("#s1").val(),"s2":$("#s2").val()}, ?#要传送过去的数据23 ????????????success:function (data) { ???????????# data是后台返回的结果24 ????????????????$("#s").val(data); ??????????????#将结果指定给文本框的值25 ????????????}26 ????????})27 ????})28 </script>29 </body>30 </html>

后端对应的方法操作:

 1 from django.views.decorators.csrf import csrf_exempt 2 @csrf_exempt 3 def home(request): 4 ????return render(request,‘home.html‘) 5 @csrf_exempt 6 def ajax_do(request): 7 ????s1=int(request.GET.get(‘s1‘)) 8 ????s2=int(request.GET.get(‘s2‘)) 9 ????print(s1,s2)10 ????s=s1*s2 ?#后台得到的两个数据进行处理11 ????return HttpResponse(s) ??#结果返回

AJAX局部刷新和异步技术

原文地址:https://www.cnblogs.com/wen-kang/p/9618385.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved