Ajax(django)

Ajax

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

目前最常用的就是通过jquery来使用ajax，jquery封装了ajax;

views：

from django.shortcuts import render,HttpResponse,render_to_response

# Create your views here.

def ajax(request):

    if request.method == 'POST':
        print request.POST
        return HttpResponse('ok')
    else:
        return render_to_response('app04/ajax.html')

ajax.html:

</head>
<body>
            <input id="name" type="text"/>
            <input type="button" value="点击执行ajax" onclick="doajax()"/>

            <script src="/static/jquery/jquery-3.2.1.js"></script>
            <script type="text/javascript">
                    function doajax() {
                        var temp = $('#name').val();/*获取id等于name的值*/
                        $.ajax({
                            url: '/app04/ajax/',/*请求要发给的URL*/
                            type:'POST',
                            data:{dat:temp},/*要传递的数据*/
                            success:function (arg) {/*这个arg的值就是后台返回的值，ok*/
                                console.log(arg);
                                console.log('success');
                            },
                            error:function () {
                                console.log('failed');
                            },
                        });
                    }
            </script>
</body>

将后台返回的字典给前台并输出：

views：

from django.shortcuts import render,HttpResponse,render_to_response
import json
# Create your views here.

def ajax(request):

    if request.method == 'POST':
        print request.POST
        data = {'status':0,'msg':'请求成功','data':[11,22,33,44,55]}
        return HttpResponse(json.dumps(data))#将字典生成一个字符串，此时返回的就是字符串
    else:
        return render_to_response('app04/ajax.html')

ajax.html

<body>
            <input id="name" type="text"/>
            <input type="button" value="点击执行ajax" onclick="doajax()"/>

            <script src="/static/jquery/jquery-3.2.1.js"></script>
            <script type="text/javascript">
                    function doajax() {
                        var temp = $('#name').val();/*获取id等于name的值*/
                        $.ajax({
                            url: '/app04/ajax/',/*请求要发给的URL*/
                            type:'POST',
                            data:{dat:temp},/*要传递的数据*/
                            success:function (arg) {/*这个arg的值就是后台返回的值，ok*/
                                var obj = jQuery.parseJSON(arg)
                                console.log(obj.status);
                                console.log(obj.data);
                                console.log(obj.msg);
                                console.log('success');
                                $('#name').val(obj.msg)
                            },
                            error:function () {
                                console.log('failed');
                            },
                        });
                    }
            </script>
</body>