Python学习第158天（ajax练习）

今天本来打算复习完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的检测不是很有效果，更需要注意细节。

posted @ 2020-09-17 22:14  崆峒山肖大侠  阅读(147)  评论(0)  编辑  收藏  举报