ajax的简单使用

Posted 2020-12-18 不忘初心

AJAX（Asynchronous javascript And XML）

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

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

 

AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

　　比如在github注册时：当你输入用户名密码是，他就是执行的局部刷新

                

 

 

 

优点：

• AJAX使用Javascript技术向服务器发送异步请求
• AJAX无须刷新整个页面

 

使用JQuery实现ajax

　　type是发送的方法

　　data是发送的数据

　　后端接收到方法和数据个执行返回一个数据，到success里拿到的data就是后端返回的数据

<button id="send">ajax_test</button>
<script>

       $("#send").click(function(){

           $.ajax({
               url:"/ajax_test/",
               type:"POST",
               data:{username:"wy",password:123},
               success:function(data){
                   console.log(data)
               },
         　　　　　　
               error: function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    },

               complete: function (jqXHR, textStatus) {
                        console.log(textStatus);
                },

               statusCode: {
                    \'403\': function (jqXHR, textStatus, err) {
                          console.log(arguments);
                     },

                    \'400\': function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    }
                }

           })

       })

</script>

 

实例：

写一个简单的计算器

后端：

url:url(r\'^sum/\', views.sum),
view:
def sum(request):
    if request.method==\'GET\':
        return render(request,\'sum_count.html\',locals())
    if request.method==\'POST\':
        num1=int(request.POST.get(\'num1\'))
        num2=int(request.POST.get(\'num2\'))
        return HttpResponse(num1+num2)

前端：

<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="sum">
<button id="submit">计算</button>


<Script>
    $(\'#submit\').click(
        function () {
            $.ajax({
                url:\'/sum/\',
                method:\'post\',
                data:{
                    num1:$(\'#num1\').val(),
                    num2:$(\'#num2\').val()
                },
                success(data){
                    console.log(data)
                    $(\'#sum\').val(data)
                }
            })
        }
    )

</Script>

 

ajax提交json格式数据

    $("#ajax_test").click(function () {
        var dic={\'name\':\'wy\',\'age\':18}
        $.ajax({
            url:\'\',
            type:\'post\',
            contentType:\'application/json\',  //一定要指定格式 contentType: \'application/json;charset=utf-8\',
            data:JSON.stringify(dic),    //转换成json字符串格式
            success:function (data) {
                console.log(data)
            }

        })

    })

提交到服务器的数据都在 request.body 里，取出来自行处理