Ajax

Posted 2022-03-23 huiwang

tags:

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

1.前端有哪些方式可以朝后端发请

　　浏览器窗口手动输入网址　　　　　　　　get请求

　　 a标签的href属性　　 get请求

   form表单                　　　　 get/post请求(默认是get请求)
   ajax                     　　  get/post请求

前后端传输数据编码格式contentType

urlencoded
   对应的数据格式:name=jason&password=666
   后端获取数据:request.POST
   ps；django会将urlencoded编码的数据解析自动放到request.POST
formdata
   form表单传输文件的编码格式
   后端获取文件格式数据:request.FILES
   后端获取普通键值对数据:request.POST
application/json
   ajax发送json格式数据
   需要注意的点
      编码与数据格式要一致


Ajax简介

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

　　　　AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

　　　　AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

　　　　AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

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

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

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

ajax基本语法 ：

# 提交的地址(url)
            # 提交的方式(type)
            # 提交的数据(data)
            # 回调函数(success)
            $(‘#d1‘).click(function () 
                    $.ajax(
                        // 提交的地址
                        url:‘/index/‘,
                        // 提交的方式
                        type:‘post‘,
                        // 提交的数据
                        data:‘name‘:‘jason‘,‘password‘:‘123‘,
                        // 回调函数
                        success:function (data)   // data接收的就是异步提交返回的结果
                            alert(data)
                        
                    )
                )

　　html 代码

<!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>

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‘)

URL.PY

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

Ajax 传输json 格式数据（ajax默认传输数据的编码格式也是urlencoded）

　　前端（前后端数据格式要一样）

  $(‘#d1‘).click(function () 
       $.ajax(
           url:‘‘,  // url参数可以不写，默认就是当前页面打开的地址
           type:‘post‘,

           contentType:‘application/json‘,

           data:JSON.stringify(‘name‘:‘jason‘,‘hobby‘:‘study‘),

           success:function (data) 
               alert(data)
               $(‘#i3‘).val(data)
           
       )

　　　后端

 # import json
        data = request.body
        #第一种解码的方式
        res1 = data.decode(‘utf-8‘)
        # print(res1, type(res1))
        #第二种解码的方式
        # res2 = str(data,encoding=‘utf-8‘)
        # print(res2,type(res2))
        #反序列化成字典
        # res3 = json.loads(res2)
        # print(res3,type(res3))

Ajax 传输文件

　　　前端

script>
    $(‘#d1‘).click(function () 
       let formdata = new FormData();
       // FormData对象不仅仅可以传文件还可以传普通的键值对
        formdata.append(‘name‘,‘jason‘);
        // 获取input框存放的文件
        //$(‘#i1‘)[0].files[0]
        formdata.append(‘myfile‘,$(‘#i1‘)[0].files[0]);
        $.ajax(
            url:‘‘,
            type:‘post‘,
            data:formdata,
            // ajax发送文件需要修改两个固定的参数

            processData:false,  // 告诉浏览器不要处理我的数据
            contentType:false,  // 不要用任何的编码，就用我formdata自带的编码格式，django能够自动识别改formdata对象


            // 回调函数
            success:function (data) 
                alert(data)
            
        )
    );
    // ajax传输文件需要借助于内置对象FormData

　　　　后端获取数据