今天本来打算复习完ajax后完成bootstrip的练习的，但是由于近期的护网（断网）行动，网速实在是。。。。。。源码加载的贼慢，所以今天暂时完成了ajax的练习
图形大致是这个样子的：
上面一个在点击提交之后，系统会进行自动检测，并在console里面返回对应语句，这里“提交”和“等于”两个标签并没有采用a标签，而是通过div标签，再采用css和JavaScript进行编辑，具体内容如下：
收下是本次记录的笔记：
对话框添加，删除，修改 添加： Ajax悄悄向后台发送请求： 1.下载jQuery 2.基本格式 $.ajax({ url:'对应所要发送的路径，对应之前添加中a标签的action', type:'规定发送方法GET/POST,此处使用的是POST', data:{'username':'root','password':'123456'}, 同url一并传递的参数 success:function(arg){ //回调函数，后台对传递参数已经完成执行，并返回结果到前台的时候，此时回调函数自动执行。 //arg就是数据后台端返回给我们的参数 //window.location.reload() //JS主动刷新页面 } })
url：
re_path('^ajax.html$',ajax.ajax1), re_path('^ajax2.html',ajax.ajax2), re_path('^ajax3.html',ajax.ajax3)
ajax.html
关键就在于这部分<head>部分的<style>标签的内容，这里通过point和onclick进行时间绑定，从而将前端数据利用ajax传到后端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .btn{ display: inline-block; padding: 5px 15px; background: cadetblue; color: white; cursor: pointer; } </style> </head> <body> <div> <input placeholder="用户名" type="text" id="username"> <input placeholder="密码" type="password" id="password"> <div class="btn" onclick="submitForm()">提交</div> </div> <p> </p> <div> <input placeholder="数字1" type="text" id="v1"> + <input placeholder="数字2" type="text" id="v2"> <div class="btn" onclick="addForm()">等于</div> <input type="text" id="v3"> </div> <script src="/static/jquery-3.1.1.js"></script> <script> function submitForm() { var data_dict = {username:$('#username').val(),password:$('#password').val()} $.ajax({ url:'/ajax2.html', type:'GET', data:data_dict, success:function (arg) { console.log(arg) } }) } function addForm() { var data_dic = {v1:$('#v1').val(),v2:$('#v2').val()} $.ajax({ url:'/ajax3.html', type:'GET', data:data_dic, success:function (arg) { $('#v3').val(arg) } }) } </script> </body> </html>
ajax.py
from django.shortcuts import render,HttpResponse def ajax1(req): return render(req,'ajax1.html') def ajax2(req): user = req.GET.get('username') pwd = req.GET.get('password') import time time.sleep(5) return HttpResponse('i do!') def ajax3(req): v1 = req.GET.get('v1') v2 = req.GET.get('v2') try: v3 = int(v1)+int(v2) except Exception as a: v3 = '输入格式错误' return HttpResponse(v3)
这部分基本属于简单处理
经过本次ajax的复习，个人认为还是不能太过看重速度，应该重视练习，内容不多，但是问题依旧不断，尤其html文件中pycharm的检测不是很有效果，更需要注意细节。