Django Ajax

Posted 2022-01-09 xt12321

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Django Ajax相关的知识，希望对你有一定的参考价值。

一、什么是 AJAX ？

AJAX = 异步 javascript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
    同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
    异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

二、AJAX 工作原理

前端绑定的事件触发，向后端发送一个请求
后端接收请求，并处理得到相应的结果，将其发送至前端
前端接收返回结果，显示在原先网页界面

三、Ajax传输的数据

1.Ajax字符串格式

符合语法规范的json对象(json只认双引的字符串格式)：
    ["one", "two", "three"]
     "one": 1, "two": 2, "three": 3 
    "names": ["张三", "李四"] 
    [  "name": "张三", "name": "李四" ]

2.stringfy与parse方法

JavaScript中关于JSON对象和字符串转换的两个方法：
JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象(json只认双引的字符串格式)
	JSON.parse(‘"name":"Howker"‘);
    JSON.parse(‘name:"Stack"‘) ;   // 错误
    JSON.parse(‘[18,undefined]‘) ;   // 错误

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

四、举个例子

<!--页面输入两个整数，通过AJAX传输到后端计算出结果并返回。-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3">
<button id="b1">Ajax Test</button>

<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    $(‘#b1‘).click(function () 
        $.ajax(
            url:‘‘,
            type:‘POST‘,
            data:i1:$(‘#i1‘).val(),i2:$(‘#i2‘).val(),
            success:function (data) 
                $(‘#i3‘).val(data)
            
        )
    )

</script>
</body>
</html>

html页面

# views.py
def ajax_test(request):
    if request.method==‘POST‘:
        i1=request.POST.get(‘i1‘)
        i2=request.POST.get(‘i2‘)
        ret=int(i1)+int(i2)
        return HttpResponse(ret)
    return render(request,‘ajax_test.html‘)

# urls.py
from django.conf.urls import url
from app01 import views
urlpatterns=[
    url(r‘^ajax_test/‘,views.ajax_test),
]

后续的内容还会写的......

以上是关于Django Ajax的主要内容，如果未能解决你的问题，请参考以下文章

AJAX相关JS代码片段和部分浏览器模型

django.core.exceptions.ImproperlyConfigured: Requested setting DEFAULT_INDEX_TABLESPACE的解决办法(转)(代码片段

Django + ajax（jquery）：http错误代码403（禁止）[关闭]

Javascript代码片段在drupal中不起作用

Django：AJAX + CSRF POST 给出 403