django之ajax

2021-02-12 05:18

阅读：787

标签：stat func 请求用户 json模块整数 shortcut rom 字符

Ajax初识

"""
异步提交
局部刷新
例子:github注册
    动态获取用户名实时的跟后端确认并实时展示的前端(局部刷新)
    
朝发送请求的方式
    1.浏览器地址栏直接输入url回车                           GET请求
    2.a标签href属性                                       GET请求
    3.form表单                                           GET请求/POST请求
    4.ajax                                              GET请求/POST请求    
    
AJAX 不是新的编程语言，而是一种使用现有标准的新方法(比较装饰器)

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

Ajax我们只学习jQuery封装之后的版本(不学原生的 原生的复杂并且在实际项目中也一般不用)
所以我们在前端页面使用ajax的时候需要确保导入了jQuery
ps:并不只有jQuery能够实现ajax，其他的框架也可以 但是换汤不换药 原理是一样的
"""

Ajax准备知识：JSON

什么是json？

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言 *
JSON 具有自我描述性，更易理解

* JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

啥都别多说了，上图吧！

技术图片

合格的json对象(json只认双引的字符串格式)：

["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["张三", "李四"] }
[ { "name": "张三"}, {"name": "李四"} ]

stringify与parse方法

JavaScript中关于JSON对象和字符串转换的两个方法：

JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象(json只认双引的字符串格式)

JSON.parse(‘{"name":"Howker"}‘);

JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。

JSON.stringify({"name":"Tonny"})

Ajax简介

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

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

小案例：

在不刷新的情况下显示计算结果到页面上，页面输入两个整数，通过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),
    # ajax
    url(r‘^ab_ajax/‘, views.ab_ajax),
]

views.py

from django.shortcuts import render,HttpResponse,redirect

# Create your views here.
def ab_ajax(request):   # 和ajax交互的时候，无论返回什么，都不会作用于浏览器，而是交给ajax的回调函数
    if request.method == "POST":
        # print(request.POST)
        i1 = request.POST.get("i1")
        i2 = request.POST.get("i2")
        i3 = int(i1) + int(i2)
        return HttpResponse(i3)
    return render(request,"index.html")

index.html

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    
    link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    
    script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">script>
    
    script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">script>
    
    link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
head>
body>
input type="text" id="d1"> +
input type="text" id="d2"> =
input type="text" id="d3">
p>
    button id="btn">点我button>
p>
script>
    // 先给按钮绑定一个点击事件
    $("#btn").click(function () {
        // 朝后端发送ajax请求
        $.ajax({
            // 1、指定朝哪个后端发ajax请求
            url:"",  // 不写就是朝当前地址提交
            // 2、请求方式
            type:"post",   //不指定默认就是get，都是小写,用ajax提交post数据，后端也是在request.POST中接收
            // 3、数据
            data:{"i1":$("#d1").val(),"i2":$("#d2").val()},
            // 4、回调函数:当后端给你返回结果的时候会自动触发 args接收后端的返回结果
            success:function (args) {
                $("#d3").val(args)     // 通过DOM操作动态渲染到第三个input里面
            }
        })
    })
script>
body>
html>

补充：如果视图函数返回字典需要序列化

# 针对后端如果是用HttpResponse返回的数据（json模块序列化后） 回调函数不会自动帮你反序列化
# 如果后端直接用的是JsonResponse返回的数据 回调函数会自动帮你反序列化

# HttpResponse解决方式
    1.自己在前端利用JSON.parse(args)，手动反序列化
    2.在ajax里面配置一个参数
       dataType:"json",

示例1：后端使用JsonResponse返回数据

urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r‘^admin/‘, admin.site.urls),
    # ajax
    url(r‘^ab_ajax/‘, views.ab_ajax),
]

views.py

from django.shortcuts import render,HttpResponse,redirect
from django.http import JsonResponse

# Create your views here.
def ab_ajax(request):   # 和ajax交互的时候，无论返回什么，都不会作用于浏览器，而是交给ajax的回调函数
    if request.method == "POST":
        # print(request.POST)
        i1 = request.POST.get("i1")
        i2 = request.POST.get("i2")
        i3 = int(i1) + int(i2)
        d = {"code":100,"msg":i3}
        return JsonResponse(d)
    return render(request,"index.html")

index.html

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    
    link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    
    script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">script>
    
    script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">script>
    
    link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
head>
body>
input type="text" id="d1"> +
input type="text" id="d2"> =
input type="text" id="d3">
p>
    button id="btn">点我button>
p>
script>
    // 先给按钮绑定一个点击事件
    $("#btn").click(function () {
        // 朝后端发送ajax请求
        $.ajax({
            // 1、指定朝哪个后端发ajax请求
            url:"",  // 不写就是朝当前地址提交
            // 2、请求方式
            type:"post",   //不指定默认就是get，都是小写,用ajax提交post数据，后端也是在request.POST中接收
            // 3、数据
            data:{"i1":$("#d1").val(),"i2":$("#d2").val()},
            // 4、回调函数:当后端给你返回结果的时候会自动触发 args接收后端的返回结果
            success:function (args) {
                {#$("#d3").val(args)     // 通过DOM操作动态渲染到第三个input里面#}
                console.log(typeof args)   // 接收到的是对象类型
            }
        })
    })
script>
body>
html>

示例2：后端用HttpResponse返回的数据（json序列化后的数据）

urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r‘^admin/‘, admin.site.urls),
    # ajax
    url(r‘^ab_ajax/‘, views.ab_ajax),
]

views.py

from django.shortcuts import render,HttpResponse,redirect
import json
# Create your views here.
def ab_ajax(request):   # 和ajax交互的时候，无论返回什么，都不会作用于浏览器，而是交给ajax的回调函数
    if request.method == "POST":
        # print(request.POST)
        i1 = request.POST.get("i1")
        i2 = request.POST.get("i2")
        i3 = int(i1) + int(i2)
        d = {"code":100,"msg":i3}
        return HttpResponse(json.dumps(d))
    return render(request,"index.html")

index.html

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    
    link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    
    script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">script>
    
    script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">script>
    
    link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
head>
body>
input type="text" id="d1"> +
input type="text" id="d2"> =
input type="text" id="d3">
p>
    button id="btn">点我button>
p>
script>
    // 先给按钮绑定一个点击事件
    $("#btn").click(function () {
        // 朝后端发送ajax请求
        $.ajax({
            // 1、指定朝哪个后端发ajax请求
            url:"",  // 不写就是朝当前地址提交
            // 2、请求方式
            type:"post",   //不指定默认就是get，都是小写,用ajax提交post数据，后端也是在request.POST中接收
            // 3、数据
            data:{"i1":$("#d1").val(),"i2":$("#d2").val()},
            // 4、回调函数:当后端给你返回结果的时候会自动触发 args接收后端的返回结果
            dataType:"json",
            success:function (args) {
                {#$("#d3").val(args)     // 通过DOM操作动态渲染到第三个input里面#}
                console.log(typeof args)   // 接收到的是对象类型
            }
        })
    })
script>
body>
html>

django之ajax

标签：stat func 请求用户 json模块整数 shortcut rom 字符

原文地址：https://www.cnblogs.com/baicai37/p/13032841.html

上一篇：CSS 文本控制

下一篇：js扩展符号

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：django之ajax
文章链接：http://soscw.com/essay/54322.html

亲，登录后才可以留言！

django之ajax

Ajax初识

Ajax准备知识：JSON

什么是json？

stringify与parse方法

Ajax简介

小案例：

补充：如果视图函数返回字典需要序列化

评论

热门文章

推荐文章

最新文章

置顶文章