ajax介绍, 模板, 文件上传, json格式数据

目录:

1. ajax介绍
2. ajax模板
3. 文件上传
4. 基于ajax提交json格式数据
5. 重点:设置请求与响应回来的解析编码格式

1. ajax介绍

1. 异步的JavaScript和xml,跟后台交互,都用json

2. ajax干啥用的?前后端做数据交互:

3. 之前学的跟后台做交互的方式:

   • 第一种:在浏览器窗口输入地址(get)

   • 第二种:用form表单提交数据

1. 特点:

   • 异步(异步和同步的区别:同步是请求发过去,要等着回应;异步:不需要等回应,可以进行其他操作)

   • 局部刷新:

2. ajax 模板

$.ajax({
    url:'/index/',
    type:'post',
    //data:往后台提交的数据
    data:{'name':'lqz','age':18},
    //成功的时候回调这个函数
    success:function (data) {
        alert(data)
    }
})

3. 上传文件

• 模板层:

  $("#btn").click(function () {
      //上传文件,必须用FormData,生产一个formdata对象
      var formdata=new FormData();
      formdata.append('name',$("#name").val());
      //取出文件$("#myfile")[0].files拿到的是文件列表,取第0个把具体的文件取出来
      formdata.append('myfile',$("#myfile")[0].files[0]);
  
      $.ajax({
          url:'/files_ajax/',
          type:'post',
          //不预处理数据,(name=lqz&age=18)
          processData:false,
          //指定往后台传数据的编码格式(urlencoded,formdata,json)
          //现在用formdata对象处理了,就不需要指定编码格式了,不要给我编码了
          contentType:false,
          data:formdata,
          success:function (data) {
              alert(data)
  
          }
      })
  

• 视图层: (跟form表单上传文件完全一样)

  def files_ajax(request):
                # 提交文件从,request.FILES中取,提交的数据,从request.POST中取
                name=request.POST.get('name')
                print(name)
                dic_files = request.FILES
                myfile = dic_files.get('myfile')
                with open(myfile.name, 'wb') as f:
                    # 循环上传过来的文件
                    for line in myfile:
                        # 往空文件中写
                        f.write(line)
                return HttpResponse('ok')
  

4. 基于ajax提交json格式数据

    $("#ajax_test").click(function () {
        var dic={'name':'lqz','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 里，取出来自行处理

5. 设置请求与响应回来的解析编码格式

- 请求的编码方式:
    contentType:'application/json',

-响应回来解析的方式
    dataType:'json',