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),
]

 

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


posted @ 2019-06-14 19:00  xt12321  阅读(278)  评论(0)  编辑  收藏  举报