zoukankan      html  css  js  c++  java
  • 12.Django与ajax

    Django与ajax

    01.AJAX简介:
      AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。

        *同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求
        *异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求
        *AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新

      优点:
        AJAX使用Javascript技术向服务器发送异步请求
        AJAX无须刷新整个页面


    02.ajax发送json数据

     1 //发送json数据
     2 $('.btn').click(function () {
     3 
     4 $.ajax({
     5 url:"",
     6 type:"post",
     7 contentType:"application/json",//默认的contentType都为urlencoded
     8 data:JSON.stringify({//相当于python中json.dumps
     9 a:1,
    10 b:2
    11 }),
    12 success:function (data) {
    13 
    14 }
    15 })
    16 })

    03.ajax上传文件

     1 <form>
     2 用户名 <input type="text" id="user">
     3 头像 <input type="file" id="avatar">
     4 <input type="button" id="ajax-submit" value="ajax-submit">
     5 </form>
     6 
     7 <script>
     8 $("#ajax-submit").click(function(){
     9 //获取文件固定格式
    10 var formdata=new FormData();
    11 formdata.append("user",$("#user").val());
    12 formdata.append("avatar_img",$("#avatar")[0].files[0]);//JS取得文件先转换为dom对象,再通过.files[0]获取
    13 $.ajax({
    14 
    15 url:"",
    16 type:"post",
    17 data:formdata,
    18 //上传文件必写这两行!!!
    19 processData: false , // 不处理数据
    20 contentType: false, // 不设置内容类型
    21 
    22 success:function(data){
    23 console.log(data)
    24 }
    25 })
    26 })
    27 </script>
  • 相关阅读:
    事件处理之跨浏览器
    IE事件处理
    DOM0级事件处理、DOM2级事件处理
    JS内置对象学习总结
    JS事件响应的学习总结
    vuex的学习例子
    npm run build 打包后,如何运行在本地查看效果(Apache服务)
    Vue.js 引入外部js方法
    Table展开行
    正则表达式test()和exec()、 search() 和 replace()用法实例
  • 原文地址:https://www.cnblogs.com/QQL-anatkh/p/9597702.html
Copyright © 2011-2022 走看看