ajax请求 POST丨ajax简介,ajax提交数据的多种类型

jQuery---ajax

ajax简介

Ajax其实质是利用浏览器提供的一个特殊的对象（XMLHttpRequest）异步地向服务器发送请求，服务 器返回部分数据，浏览器让你去利用这些数据对象页面做部分的更新，整个过程，页面无刷新，不打断用 户的操作。

同步和异步的区别

同步：如果与服务器端的交互方式是同步，当客户端与服务器交互时，客户端就不能进行其他 操作，只能等待服务器端的响应，会刷新页面。

异步：当客户端正在进行正常操作时，还可以同时与服务器进行交互，服务器响应客户端信息，将 信息更新到网页局部，整个过程页面不刷新。

'''

ajax不是一种新语言。它是几种技术的综合使用。

ajax是一种技术。

ajax是一种在WEB应用程序中向服务器发送异步请求，接收异步响应的技术。

特点：异步提交 局部刷新

'''

$.ajax使用方法参数

1.url:
　　要求为String类型的参数，（默认为当前页地址）发送请求的地址。

2.type:
　　要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

3.timeout:
　　要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

4.async:
　　要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

5.cache:
　　要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。

　　cache属性是true（默认值）时：在第一次请求完成之后，如果地址和参数不变化，第二次去请求，会默认获取缓存中的数据，不去读取服务器端的最新数据。

　　cache属性是flase（默认值）时：每次读取的是最新的数据。

　　ajax缓存只对GET方式的请求有效，因为浏览器认为POST请求提交的内容必定有变化，所以不走缓存。所以POST下都是false

6.data:
　　要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

7.dataType:
　　要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。

8.traditional:

　　防止深度序列化；ajax做数据处理时，是通过jQuery.param( obj, traditional )该方法进行处理。
jquery1.4版本以后traditional参数，默认false的时候如果是{a:{b:'value'}}是处理成a[b],这样形式，如果是数组：data:{a:[1,2]}，是解析成a[]=1&a[]=2，这种方式后台确实要做兼容（取a[b]或a[]）来取值。

在数组情况下把traditional参数设置成true，是解析成a=1&a=2,对后台直接通过a拿数据。但是实验了下object情况，把traditional设置成true，转成了a=[object+Object]，这样就是费的了。false时解析成上面的形式应该就是类型指示作用，我看到这种格式就知道请求数据是Array还是object了，true就是按照form提交的方式传值。

这个属性默认是false,jquery会深度序列化这个对象，以适应PHP等框架，我们可以通过设置tradtional为true阻止深度序列化

这样以后碰到复选框传多个id的时候就不用前台拼后台spilt了，直接用ajax的traditional属性，传过去一个数组，后台直接一个List<Long> idList接受即可。非常方便。

9.beforeSend：
　　要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
            function(XMLHttpRequest){
               this;   //调用本次ajax请求时传递的options参数
            }
10.complete：
　　要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
          function(XMLHttpRequest, textStatus){
             this;    //调用本次ajax请求时传递的options参数
          }

11.success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
         (1)由服务器返回，并根据dataType参数进行处理后的数据。
         (2)描述状态的字符串。
         function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
            this;  //调用本次ajax请求时传递的options参数
         }

12.error:
　　要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下：
       function(XMLHttpRequest, textStatus, errorThrown){
          //通常情况下textStatus和errorThrown只有其中一个包含信息
          this;   //调用本次ajax请求时传递的options参数
       }

　　可以从4个属性中读取信息：

  readyState:当前的状态；0：未初始化；1：正在载入；2：已经载入；3：数据进行交互；4：完成
  status:返回的HTTP状态码；常见的错误404（客户端出错），500（服务端出错）
  statusText:对应状态码的错误信息；eg:404：not found;500：Internal Server Error
  responseText:服务器响应返回的文本信息　
13.contentType：
　　要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

14.dataFilter：
　　要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
            function(data, type){
                //返回处理后的数据
                return data;
            }

15.dataFilter：
　　要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
            function(data, type){
                //返回处理后的数据
                return data;
            }

16.global：
　　要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。

17.ifModified：
　　要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。

18.jsonp：
　　要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

19.username：
　　要求为String类型的参数，用于响应HTTP访问认证请求的用户名。

20.password：
　　要求为String类型的参数，用于响应HTTP访问认证请求的密码。

21.processData：
　　要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

22.scriptCharset：
要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

小案例

页面上有三个input框和一个提交按钮 前两个框输入数字 点击按钮 最后一个框里面展示数字的和 并
    且页面不能刷新

HTML：
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
        {% load static %}
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.0.0/jquery.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>
    </head>
    <body>
        <input type="text" id="txt1">+<input type="text" id="txt2">=<input type="text" id="txt3">
        <input type="submit" id="but1">
    </body>
        <script>
            $('#but1').on('click',function (){
                let txt1 = $('#txt1').val()
                let txt2 = $('#txt2').val()
                $.ajax({
                    url:'', // 不写默认就是当前页面所在的地址
                    type:'post', // 指定当前请求方式
                    data:{'txt1':txt1,'txt2':txt2},  // 请求携带的数据
                    success:function (args){    // 异步回调函数 后端有回复自动触发
                        $('#txt3').val(args)
                    }
                })
            })
        </script>
    </html>

ajax发送json格式数据

1.封装数据(前端)
        var data_dict = {
            'name' : '春游去动物园',
            'age' : 20,
         }
2.发送数据（前端）
        $('#but1').on('click',function (){
            $.ajax({
                url:'',
                type:'post',
                data:JSON.stringify(data_dict), # 序列化
                contentType:'application/json'
            })
        })
3.后端获取
def home(request):
    if request.is_ajax():
        if request.method == 'POST':
            print(request.POST) # <QueryDict: {'{"name":"春游去动物园","age":21}': ['']}>
            print(request.body) # b'{"name":"\xe6\x98\xa5\xe6\xb8\xb8\xe5\x8e\xbb\xe5\x8a\xa8\xe7\x89\xa9\xe5\x9b\xad","age":21}'
            json_data = json.loads(request.body)
            print(json_data) # {'name': '春游去动物园', 'age': 21}
            print(type(json_data)) # <class 'dict'>
    return render(request,'home.html')

'''
后端接收前端传来的json数据时，django会将数据都放在request.body中，但是body中的数据是二
进制数据，所以我们还需要使用json.loads将数据转换成python的基本数据类型。

ajax携带文件数据

HTML：通过内置对象FormData进行封装数据
    <input type="text" id="txt1">+<input type="text" id="txt2">=<input type="text" id="txt3">
    <input type="file" value="上传文件" id="file1">
    <input type="submit" id="but1">

    $('#but1').on('click',function (){
              let formdata = new FormData()
              //添加普通数据
              formdata.append('txt1',$('#txt1').val())
              formdata.append('txt2',$('#txt2').val())
              //添加文件数据
              formdata.append('file',$('#file1')[0].files[0])
              $.ajax({
                  url:'',
                  type:'post',
                  data:formdata,
                  // 携带文件必须要指定的两个参数
                  contentType: false,
                  processData: false
              })
          })

后端处理：
  def home(request):
    if request.is_ajax():
        if request.method == 'POST':
            print(request.POST) # <QueryDict: {'txt1': ['1'], 'txt2': ['2']}>
            print(request.POST.get('txt1'),request.POST.get('txt2'),end='   ')
            print(request.FILES) # <MultiValueDict: {'file': [<InMemoryUploadedFile: laopo.jpg (image/jpeg)>]}>
            image = request.FILES.get('file')
            with open(image.name,'wb') as f:
                for i in image:
                    f.write(i)
    return render(request,'home.html')

'''
普通数据都在request.POST中，文件数据在request.FILSE中。
'''