$Django ajax简介 ajax简单数据交互,上传文件(form-data格式数据),Json数据格式交互

时间：2022-01-09 22:32:44
一.ajax
  1 什么是ajax:异步的JavaScript和xml,跟后台交互,都用json
  2 ajax干啥用的?前后端做数据交互:
  3 之前学的跟后台做交互的方式:
   -第一种:在浏览器窗口输入地址(get)
   -第二种:用form表单提交数据
  4 特点:
   -异步(异步和同步的区别:同步是请求发过去,要等着回应;异步:不需要等回应,可以进行其他操作)
   -局部刷新（*****）:
  5 $.ajax({
            url:'/index/',
            type:'post',
            //data:往后台提交的数据
            data:{'name':'lqz','age':18},
            //成功的时候回调这个函数
            success:function (data) {
                alert(data)
            }
        })
  6 上传文件
   模板层:
   <form action="" method="post" enctype="multipart/form-data">
   $("#btn").click(function () {
    //上传文件,必须用FormData,生产一个formdata对象
    var formdata=new FormData();
 
　//添加 text input 的数据
    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)
    myfile = request.FILES.get('myfile')
    with open(myfile.name, 'wb') as f:
     for line in myfile:
      f.write(line)
    return HttpResponse('ok')
   
  7 基于ajax提交json格式数据
   -模板层:
   <form action="" method="post" enctype="multipart/form-data"> 后台body 取到 b'name=1&age=2 
　<form> url上显示数据 后台body取到 b'字典
　　
    $('#btn').click(function () {
    var post_data={'name':$("#name").val(),'pwd':$("#pwd").val()};
    console.log(typeof post_data);
    // 如何把post_data这个字典,转成json格式字符串
    //JSON.stringify相当于python中json.dumpus(post_data)
    //pos是个字符串,json格式字符串
    var pos=JSON.stringify(post_data);
    console.log(typeof pos);
    $.ajax({
     url:'/json/',
     type:'post',
     data:pos,
     //后台返回的字符json数据格式自动转换成obj
     //dataType:'json',
     //指定数据格式类型
     contentType:'application/json',
     success:function (data) {
      //如果data是json格式字符串,如何转成对象(字典)?
      //data=JSON.parse(data)
      console.log(typeof data)
      console.log(data)
      var ret=JSON.parse(data)
      console.log(typeof ret)
      console.log(ret.status)
      //alert(data)
     }
    })
   })
   -视图层:
    def add_json(request):
     if request.method=='GET':
      return render(request,'json.html')
     print(request.POST)
     print(request.GET)
     print(request.body)
     import json
     # res是个字典
     res=json.loads(request.body.decode('utf-8'))
     print(res)
     print(type(res))
     dic={'status':'100','msg':'登录成功'}
     # 返回给前台json格式  (2种方式)
     return HttpResponse(json.dumps(dic)) #里面的为str字典 返回给前台str字典,前台指定datatype;'json',自动变成字典对象
     # return JsonResponse(dic) #dic为字典 返回给前台字典对象
      
   -重点:*****
    - 请求的编码方式:
     contentType:'application/json',
    -响应回来解析的方式
     dataType:'json',

随机推荐

  1. 解决： AGPBI&colon; &lbrace;&quot&semi;kind&quot&semi;&colon;&quot&semi;error&quot&semi;&comma;&quot&semi;text&quot&semi;&colon;&quot&semi;indicate that it is &ast;not&ast; an inner class&period;&quot&semi;&comma;&quot&semi;sources&quot&semi;&colon;&lbrack;&lbrace;&rcub;&rsqb;&rcub;

    关于Gradle Console输出类似这样错误信息: AGPBI: {"kind":"error","text":"indica ...

  2. 将一段含有0的字符数组赋给string

    string有个成员函数,assign() 可以这样: string str; str.assign(temp, sizeof(temp));

  3. flush privileges 什么意思

    mysql> update mysql.user set password=PASSWORD(‘新密码’) where User=’root’;­ mysql> flush privile ...

  4. smarty插件

    smarty插件    1.目录:放在Smarty类库下的plugins目录下面(默认存放的都是smarty自带的插件)        smarty3.0提供了自定义插件目录的方式:        $ ...

  5. 0&lowbar;Simple&lowbar;&lowbar;simpleOccupancy

    计算核函数调用使得占用率,并尝试使用 runtime 函数自动优化线程块尺寸,以便提高占用率. ▶ 源代码. #include <iostream> #include "cuda ...

  6. Spring4笔记12--SSH整合3--Spring与Struts2整合

    SSH 框架整合技术: 3. Spring与Struts2整合(对比SpringWeb): Spring 与 Struts2 整合的目的有两个: (1)在 Struts2 的 Action 中,即 V ...

  7. Cloudera Manager大数据集群环境搭建

    笔者安装CDH集群是参照官方文档:https://www.cloudera.com/documentation/enterprise/latest/topics/cm_ig_install_path_ ...

  8. C&num; 实现java中 wiat&sol;notify机制

    最近在学习java,看到wiat/notify机制实现线程通信,由于平时工作用的C#,赶紧用C#方式实现一个demo. Java 代码: import java.util.ArrayList; imp ...

  9. 在c&num;中使用sqlite3

    Sqlite3是一款优秀的数据库软件,在嵌入式设备和移动端都有使用,我司现在有些项目使用的数据库是access,说实话,对这些不太感冒,我还是喜欢优雅简单的东东,于是乘着这几天休息的时间学习了下在c# ...

  10. Git学习笔记三--管理修改、撤销修改、删除文件

    1.管理修改 什么是修改?比如你新增了一行,这就是一个修改,删除了一行,也是一个修改,更改了某些字符,也是一个修改,删了一些又加了一些,也是一个修改,甚至创建一个新文件,也算一个修改. 为什么说Git ...

相关文章