ajax入門

時間 2021-08-12

標籤 css html 前端 python jquery ajax django json 後端瀏覽器欄目 Ajax 简体版

原文原文鏈接

1、json學習css

一、json(Javascript Obiect Notation,JS對象標記)是一種輕量級的數據交換格式。html

（1）python中的序列化(dumps)與反序列化(loads)前端

import json
ret=json.dumps({'name':'alex'})
print(ret)                #結果：{"name": "alex"}
ret=json.loads('{"name":"alex"}')
print(ret["name"])       #結果：alex

（2）JS中的序列化(stringify)與反序列化(parse)python

JSON.stringify():用於將一個JavaScript對象轉換爲JSON字符串jquery

JSON.parse():用於將一個JSON字符串轉換爲JavaScript對象ajax

<script>
//===========js中的json的序列化=======
s2={'name':'yuan'};
console.log(JSON.stringify(s2),typeof JSON.stringify(s2))  //string
//===========js中的json反序列化===========
s = '{"name":1}';
var data = JSON.parse(s);
console.log(data);
console.log(typeof data);   //object
</script>

2、Ajax簡介django

一、介紹json

ajax：前端向後端發送數據的一種方式後端

AJAX（Asynchronous Javascript And XML）翻譯成中文就是「異步Javascript和XML」。即便用Javascript語言與服務器進行異步交互，傳輸的數據爲XML（固然，傳輸的數據不僅是XML）。瀏覽器

同步交互：客戶端發出一個請求後，須要等待服務器響應結束後，才能發出第二個請求；

異步交互：客戶端發出一個請求後，無需等待服務器響應結束，就能夠發出第二個請求。

Ajax的特色：

　　異步交互：　當請求發出後，瀏覽器還能夠進行其餘操做，無需等待服務器的響應！

　　局部刷新：整個過程當中頁面沒有刷新，只是刷新頁面中的局部位置而已！

二、優勢

AJAX使用Javascript技術向服務器發送異步請求；

AJAX無須刷新整個頁面；

由於服務器響應內容再也不是整個頁面，而是頁面中的局部，因此AJAX性能高；

3、jQuery實現的ajax

urls.py文件內容:

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/', views.index),
    url(r'^user/valid', views.user_valid),
]

views.py文件內容:

from django.shortcuts import render,HttpResponse,redirect
from .models import *
def index(request):
    return render(request,"index.html",locals())
def user_valid(request):
    # name=request.GET.get("name")
    name=request.POST.get("name")
    ret=User.objects.filter(name=name)
    res={"state":True,"msg":""}
    if ret:
        res["state"]=False
        res["msg"]="該用戶已存在"
    import json
    return HttpResponse(json.dumps(res))

index.html文件內容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% csrf_token %}
<p>用戶名：<input type="text" id="user"><span></span></p>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
        $("#user").blur(function(){
                $.ajax({
                    url: "/user/valid",
                    type: "post",
                data: {
                    "name":$("#user").val(),
                    'csrfmiddlewaretoken':$("[name='csrfmiddlewaretoken']").val(),    {#防止出現404報錯#}
                    },
                success: function(data){
                    var data = JSON.parse(data);
                    console.log(data);
                    console.log(typeof data);
                    if (!data.state){
                        $('.error').html(data.msg).css("color", "red");
                        // location.href="http://www.baidu.com"
                        }
                    }
                })
        })
</script>
</body>
</html>

4、作加法計算的ajax練習

urls.py文件內容:

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/', views.login),
    url(r'^user/valid', views.user_valid),
]

views.py文件內容:

from django.shortcuts import render,HttpResponse,redirect
from .models import *
def user_valid(request):                                #處理從html頁面獲得的數據
    num1 = request.POST.get("num1")
    num2 = request.POST.get("num2")
    ret=int(num1)+int(num2)
    return HttpResponse(str(ret))                       #返回的字符串類型
def login(request):
    if request.method=="POST":
        user=request.POST.get("user")
        pwd=request.POST.get("pwd")
        user=UserInfo.objects.filter(user=user,pwd=pwd).first()
        if user:
            obj=HttpResponse("登陸成功")
            obj.set_cookie("is_login_yuan",True)
            obj.set_cookie("username",user.user)
            return obj
    return render(request,'login11.html')

login11.html文件內容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% csrf_token %}
<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="ret"><button>submit</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    $(".cal").click(function () {
         $.ajax({
                url:"/user/valid",                     {#數據發送到/user/valid，即執行函數user_valid#}
                type:"post",
                data:{
                    "num1":$("#num1").val(),            {#取到輸入的num1的值#}
                    "num2":$("#num2").val(),            {#取到輸入的num2的值#}
                    'csrfmiddlewaretoken':$("[name='csrfmiddlewaretoken']").val(),
                },
                success:function (data) {
                    if (!data.state){
                        $('#ret').val(data)                {#將函數user_valid返回的值填到id爲ret的輸入框中做爲獲得的結果#}
                    }
                }
            })
    })
</script>
</body>
</html>

5、cookie的簡單操做

cookie實現了瀏覽器保存用戶登陸狀態信息，保證了用戶只需登陸一次就能夠，不須要每一個訪問頁面都登陸

models.py的文件內容：

from django.db import models
class User(models.Model):
    name=models.CharField(max_length=32)
    age=models.IntegerField()
class UserInfo(models.Model):
    user=models.CharField(max_length=32)
    pwd=models.CharField(max_length=32)

views.py文件內容:

from django.shortcuts import render,HttpResponse,redirect
def index(request):
    ret=request.COOKIES.get("is_login_yuan")                   #不能直接訪問index路徑，判斷是否登陸

    if not ret:
        return redirect("/login/")
    username = request.COOKIES.get("username")
    return render(request,"index.html",locals())

def login(request):
    if request.method=="POST":
        user=request.POST.get("user")
        pwd=request.POST.get("pwd")
        user=UserInfo.objects.filter(user=user,pwd=pwd).first()
        if user:
            obj=HttpResponse("登陸成功")
            obj.set_cookie("is_login_yuan",True)
            obj.set_cookie("username",user.user)
            return obj                               #返回：登陸成功
    return render(request,'login.html')

urls.py文件內容:

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/', views.login),
    url(r'^index/', views.index),
]

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
    {% csrf_token %}
    用戶名：<input type="text" name="user">
    密碼：<input type="password" name="pwd">
    <input type="submit">
</form>
</body>
</html>