Django-Ajax 前端-jQuery-ajax

时间 2019-12-06

原文原文链接

一：Ajax简介

做用：前端浏览器向后端服务器发送请求的一种技术css

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即便用Javascript语言与服务器进行异步交互，传输的数据为XML（固然，传输的数据不仅是XML,如今更多使用json数据）。html

1：浏览器向服务器发送请求的形式

（1）地址栏输入url 默认get方式
（2）form表单的提交按钮 get或者post
（3） a标签默认get前端

（4）ajaxjava

2：ajax引言

上面的请求形式中前3个的请求方式时，浏览器接收到回应消息时，会刷新整个页面。那么能不能实现局部刷新呢？ajax就能实现这点。python

3：ajax的特色、优势

　　异步交互----AJAX使用Javascript技术向服务器发送异步请求jquery

　　浏览器页面局部刷新---AJAX无须刷新整个页面ajax

补充：数据库

同步交互：客户端发出一个请求后，须要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就能够发出第二个请求。

4：ajax为何可以局部刷新呢？

ajax是JavaScript的一种技术。而ajax只是DOM操做中触发的事件，因此对于浏览器来讲还会再开始的页面上的局部渲染事件。json

二：ajax案例--利用ORM（Django）-计算

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Ajax</title>
 6     <script src="/static/js/jquery-3.3.js"></script>
 7 </head>
 8 <body>
 9 {% csrf_token %}
10 <input type="text" id="num1"> + <input id="num2" type="text"> = <input id="ret" type="text">
11 <button class="cal ">计算</button>
12 
13 <script>
14     $('.cal').click(function () {
15         var num1 = $("#num1").val();
16         var num2 = $("#num2").val();
17 
18         $.ajax({
19             url: '/cal/',
20             type: 'get',
21             data:{     //这不是字典，是对象类型，特色，键能够不加引号
22                num1:num1,
23                num2:num2,
24                csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
25             },
26             success(response) {
27 
28                 $('#ret').val(response)
29             }
30 
31         })
32     })
33 
34 </script>
35 
36 
37 </body>
38 </html>

index.html

urls.py

    path('index/', views.index),
    path('cal/', views.cal),

views.py

def index(request):

        return render(request,'index.html')
def cal(request):
    num1 = request.GET.get('num1')
    num2 = request.GET.get('num2')
    num3 = float(num1) + float(num2)
    return HttpResponse(str(num3))

分析：

首先咱们再浏览器上访问http://127.0.0.1:8000/index/，输入计算数值，并点击提交按钮。

其次，点击提交按钮（这已是到服务端了）就会再index.html文件中触发onclick事件，而事件里有ajax请求(请求消息：ajax的get url data)，根据ajax的url向服务端发送相应数据，实际上这里就会再服务端经过url再经过view中的函数处理，处理完以后返回数据。

实际上这个数据(response)就会返回到ajax的success回调函数里，而后咱们再渲染到前端的页面上。

从这里咱们能够看到前端页面其实是没有变更的，变更的只不过是局部事件触发渲染出来的结果。固然这就体现了ajax的做用了

二：json

咱们须要把数据转化为json数据，由于网络传输中和文件存储中须要转成序列化数据才能够

1:python中的json

python经常使用模块--序列化模块

2:json数据标准

json字符串是双引号

3:javascript中的json使用

序列化方法：  JSON.stringify()  等同于Python json.dumps()
反序列化方法： JSON.parse()      等同于Python json.loads()

三：案例--登录认证

要求：登录成功跳转到首页，失败则在后面提示

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <script src="/static/js/jquery-3.3.js"></script>
 8 
 9 </head>
10 <body>
11 
12 <form>
13        用户名 <input type="text" id="user">
14        密码 <input type="password" id="pwd">
15 {#        这里form表单里用button#}
16        <input type="button" value="提交" id="login_btn"><span class="error"></span>
17        {% csrf_token %}
18 
19 </form>
20 
21 <script>
22 
23     $("#login_btn").click(function () {
24 
25         // 发送Ajax请求登陆认证
26 
27         $.ajax({
28             url:"/login/",
29             type:"post",
30             data:{
31                 user:$("#user").val(),
32                 pwd:$("#pwd").val(),
33                 csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
34             },
35             success:function (response) {
36                 console.log(response);   // json字符串
37                 var res=JSON.parse(response);  //js中的反序列化
38                 console.log(res);
39                 if (res.user){
40                     // 登录成功
41                     location.href="/index/"  //跳转到首页
42                 }else{
43                     // 登陆失败，则显示。。。
44                     $(".error").html(res.error).css("color","red");
45                     setTimeout(function () {
46                         $(".error").html("")
47                     },1000)
48                 }
49 
50             }
51         })
52     })
53 
54 
55 </script>
56 
57 </body>
58 </html>

urls.py

 path('login/', views.login),

views.py

def login(reqeust):

    if reqeust.method=="POST":

        res={"user":None,"error":""}

        print(reqeust.POST)
        user=reqeust.POST.get("user")
        pwd=reqeust.POST.get("pwd")
        # 与数据库中的数据表信息进行比对
        user_obj=UserInfo.objects.filter(user=user,pwd=pwd).first()
        if user_obj:
            res["user"]=user
        else:
            res["error"]="用户名或者密码错误！"
        return HttpResponse(json.dumps(res))  #须要序列化

    else:
        return render(reqeust,"login.html")

View Code