12.Django与ajax

Posted qql-anatkh

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 







以上是关于12.Django与ajax的主要内容,如果未能解决你的问题,请参考以下文章

html PHP代码片段: - AJAX基本示例:此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

代码适用于与单个 html 文件不同的堆栈片段

AJAX相关JS代码片段和部分浏览器模型

ajax与 axios的基础讲解(附代码及接口)

Django初识

Javascript代码片段在drupal中不起作用