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>

  

  

  

相关文章