5.19python笔记

ajax简单使用

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

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

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

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

    ajax是一种技术。

    ajax是一种在WEB应用程序中向服务器发送异步请求，接收异步响应的技术。
    
    特点：异步提交 局部刷新
    '''

# ajax与form表单提交数据的区别
	ajax提交数据页面不用刷新，原始数据还在，处理数据的过程中不影响页面其他操作；
    form表单提交数据页面刷新，原始数据不在，并且处理数据的过程中无法做其他操作；
    
# 案例模拟
	需求：页面上有三个input框和一个提交按钮，前两个框输入数字，点击按钮，最后一个框里面展示数字的和，并且页面不能刷新；
    <input type="text" id="i1">+
    <input type="text" id="i2">=
    <input type="text" id="i3">
    <button id="btn">计算</button>
    # 给按钮设置单击事件，使用ajax提交数据
    <script>
    $('#btn').click(function () {
        // 获取两个框里面的数据
        let i1Val = $('#i1').val();
        let i2Val = $('#i2').val();
       // 发送ajax请求传输数据
       $.ajax({
           url:'',  // 不写默认就是当前页面所在的地址
           type:'post', // 指定当前请求方式
           data:{'i1':i1Val,'i2':i2Val},  // 请求携带的数据
           success:function (args) {  // 异步回调函数 后端有回复自动触发
                                    $('#i3').val(args)
                                   }
       })
    </script>

前后端传输数据编码格式

"""
请求体中携带编码格式
	Content-Type:...
django针对不同编码方式对应的数据格式会采用不同的处理策略
"""
# form发送的格式
    form表单默认发送的编码格式：
      Content-Type: application/x-www-form-urlencoded
      数据格式:username=jason&password=123
      django后端会自动处理到:request.POST
    form表单发送文件：
      Content-Type: multipart/form-data
      数据格式:隐藏不让看
      django后端会自动处理:request.POST  request.FILES
# ajax发送的格式
    ajax默认的编码格式：
      Content-Type: application/x-www-form-urlencoded
      数据格式:username=jason&password=123
      django后端会自动处理到:request.POST
   要想正常使用传输的数据，必须按照对应的编码格式，因此使用ajax前后端传递不同数据也需要考虑编码格式；

ajax提交数据的多种类型

# form表单是无法发送json格式数据的!!!
    ajax发送的数据类型一定要跟数据的编码格式一致 
        编码格式是urlencoded 
        数据格式就应该是username=jason&password=123
ps：
django后端真多json格式的数据不会做任何的处理，就在request.body内，需要我们自行处理；

# 使用ajax发送json数据
	<button id="d1">发送json格式数据</button>
    
    <script>
	$('#d1').click(function () {
        $.ajax({
            url:'',
            type:'post',  // 不写默认也是get请求
            contentType:'application/json',  // 不写默认是urlencoded编码
            data:JSON.stringify({'name':'jason','pwd':123}),  // 序列化方法
            success:function (args) {
            }
        	})
    	})
    </script>

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中。
'''