Ajax向后端发送数据可以有三种方式：原生Ajax方式，jQuery Ajax方式，iframe+form 方式（伪造Ajax方式）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .btn {

             background-color: coral;

             color: white;

             padding: 5px 10px;

             border-radius: 26%;

             cursor: pointer;

         }

     </style>

 </head>

 <body>

 <h1>原生Ajax测试</h1>

 <a class="btn" onclick="AjaxTest1()">get发送</a>&nbsp;&nbsp;<a class="btn" onclick="AjaxTest2()">post发送</a>

 <h1>仿Ajax(iframe+form)测试</h1>

 <iframe src="" frameborder="" id="ifm" name="ifm"></iframe>

 <form action="/ajax" method="get" target="ifm" id="fm">

     <p><input type="text" name="user"></p>

     <p><a onclick="AjaxTest4()">提交</a></p>

     {% comment %}    <p><input type="submit" value="提交"></p>{% endcomment %}

 </form>

 <h1>上传文件</h1>

 <h3>Ajax(jQuery+原生)上传</h3>

 <p><input type="file" id="file"></p>

 <a class="btn" onclick="AjaxTest5()">上传</a>

 <h3>Ajax(iframe+form)上传</h3>

 <iframe src="" frameborder="" id="ifm2" name="ifm2"></iframe>

 <form action="/ajax" method="post" target="ifm2" enctype="multipart/form-data" id="fm2">

     <p><input type="file" id="if_file" name="k3"></p>

     <a class="btn" onclick="AjaxTest6()">上传</a>

 </form>

 <script>

     function AjaxTest1() {

         var xhr = new XMLHttpRequest();

         xhr.onreadystatechange = function () {

             if (xhr.readyState == 4) {

                 console.log(xhr.responseText);

             }

         };

         xhr.open("GET", "/ajax?p=123");

         xhr.send(null);

     }

     function AjaxTest2() {

         var xhr = new XMLHttpRequest();

         xhr.onreadystatechange = function () {

             if (xhr.readyState == 4) {

                 console.log(xhr.responseText);

             }

         };

         xhr.open("POST", "/ajax");

         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset-UTF-8");

         xhr.send("p=222");

     }

     function AjaxTest4() {

         document.getElementById("ifm").onload = AjaxTest3;

         document.getElementById("fm").submit();

     }

     function AjaxTest3() {

         {#console.log(thi.contentWindow.document.body.innerText);#}

         {#console.log($(thi).contents().find("body").html());#}

         var content = this.contentWindow.document.body.innerHTML;

         var obj = JSON.parse(content);

         if (obj.status) {

             alert(obj.message);

         }

     }

     function AjaxTest5() {

         var formdata = new FormData()

         formdata.append("k1", "v1");

         formdata.append("k2", "v2");

         formdata.append("k3", document.getElementById("file").files[0]);

         var xhr = new XMLHttpRequest();

         xhr.onreadystatechange = function () {

             if (xhr.readyState == 4) {

                 console.log(xhr.responseText);

             }

         };

         xhr.open("POST", "/ajax");

         {#xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset-UTF-8");#}

         xhr.send(formdata);

     }

     function AjaxTest6() {

         document.getElementById("ifm2").onload = AjaxTest7;

         document.getElementById("fm2").submit();

     }

     function AjaxTest7() {

         {#console.log(thi.contentWindow.document.body.innerText);#}

         {#console.log($(thi).contents().find("body").html());#}

         var content = this.contentWindow.document.body.innerHTML;

         var obj = JSON.parse(content);

         console.log(obj);

     }

 </script>

 </body>

三种方式传递数据和上传文件HTML页面

 from django.shortcuts import render,HttpResponse,redirect

 import uuid

 import os

 import json

 # Create your views here.

 def ajax(request):

     print("get请求：",request.GET)

     print("post请求：",request.POST)

     # print("请求体：",request.body)

     print(request.FILES)

     ret={'status':True,'message':'ok!'}

     file=request.FILES.get("k3")

     f=open(file.name,"wb")

     for i in file.chunks():

         f.write(i);

     f.close()

     return HttpResponse(json.dumps(ret))

 def index(request):

     return render(request,"index.html")

后端view函数接收数据

模拟网站上传图片并在网页实时显示图片效果

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <iframe src="" frameborder="" id="ifm" name="ifm" style="display: none"></iframe>

 <form action="/upload" method="post" enctype="multipart/form-data" id="fm" target="ifm">

     <p><input type="file" onchange="upload()" name="img"></p>

 </form>

 <h3>预览</h3>

 <div id="preview">

 </div>

 <script src="/static/jquery-1.11.0.js"></script>

 <script>

     function upload() {

         document.getElementById("ifm").onload = uploadifm;

         document.getElementById("fm").submit();

     }

     function uploadifm() {

         var content = this.contentWindow.document.body.innerHTML;

         var obj = JSON.parse(content);

         var tag = document.createElement("img");

         tag.src = obj.path;

         $("#preview").empty().append(tag);

     }

 </script>

 </body>

 </html>

上传图片并在上传页面展示HTML页面

 from django.shortcuts import render,HttpResponse,redirect

 import uuid

 import os

 import json

 # Create your views here.

 def upload(request):

     if request.method=="GET":

         return render(request,"upload.html")

     else:

         dic={'status':True,'path':None,'message':None}

         img=request.FILES.get("img")

         uid=str(uuid.uuid4())

         file_path=os.path.join("static",uid+img.name)

         f=open(file_path,"wb")

         for i in img.chunks():

             f.write(i)

         f.close()

         dic["path"]=file_path

         dic["message"]="上传成功！"

         return HttpResponse(json.dumps(dic))

上传图片并在上传页面展示后端view函数

Ajax上传数据和上传文件（三种方式）的更多相关文章

  1. hive 分区表与数据产生关联的三种方式

    所谓关联,可以理解为能够使用select查询到 1.load 这是最常用的一种方式 load data [local] inpath "数据路径" into table table ...

  2. MVC ，Action方法传数据给视图有几种方式？--PS：tempData和Viewbag，还有ViewData之间的区别

    //---------------------------------控制器向视图传递数据 public ActionResult TransData() { //1.ViewBag ViewBag. ...

  3. getline数据来源你的三种方式

    (1)getline从交互式的用户输入中\c中获取内容: # awk 'BEGIN {system("echo \"Input your name:\"");g ...

  4. C#批量插入数据到Sqlserver中的三种方式

    本篇,我将来讲解一下在Sqlserver中批量插入数据. 先创建一个用来测试的数据库和表,为了让插入数据更快,表中主键采用的是GUID,表中没有创建任何索引.GUID必然是比自增长要快的,因为你生 成 ...

  5. 【转载】C#批量插入数据到Sqlserver中的三种方式

    引用:https://m.jb51.net/show/99543 这篇文章主要为大家详细介绍了C#批量插入数据到Sqlserver中的三种方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本篇, ...

  6. Git应用详解第四讲：版本回退的三种方式与stash

    前言 前情提要:Git应用详解第三讲:本地分支的重要操作 git作为一款版本控制工具,其最核心的功能就是版本回退,没有之一.熟悉git版本回退的操作能够让你真真正正地放开手脚去开发,不用小心翼翼,怕一 ...

  7. Django文件上传三种方式以及简单预览功能

    主要内容: 一.文件长传的三种方式 二.简单预览功能实现 一.form表单上传 1.页面代码 <!DOCTYPE html> <html lang="en"> ...

  8. 三种方式上传文件-Java

    前言:负责,因为该项目他(jetty嵌入式开始SpringMvc)实现文件上传的必要性,并拥有java文件上传这一块还没有被曝光.并 Http 更多晦涩协议.因此,这种渐进的方式来学习和实践上载文件的 ...

  9. 头像截图上传三种方式之一（一个简单易用的flash插件）（asp.net版本）

    flash中有版权声明,不适合商业开发.这是官网地址:http://www.hdfu.net/ 本文参考了http://blog.csdn.net/yafei450225664/article/det ...

随机推荐

  1. 如何修改tomcat名称

    修改tomcat名称为  Tomcat-jx-1

  2. 吴裕雄--天生自然python学习笔记：pandas模块导入数据

    有时候,手工生成 Pandas 的 DataFrame 数据是件非常麻烦的事情,所以我们通 常会先把数据保存在 Excel 或数据库中,然后再把数据导入 Pandas . 另 一种情况是抓 取网页中成 ...

  3. as和强制类型转换的区别

    之前一直以为as就是强制类型转换,只是as是AS3中新的语法,之前用在有继承关系的对象之间的转换也无甚区别,但是今天却让我领悟到了它俩之间的区别. 原起:今天要给ColorPicker控件动态赋值,它 ...

  4. G 小石的图形

    题目链接:https://ac.nowcoder.com/acm/contest/949/G 思路: 思路是很简单,一个小学数学题.但是n次WA后才过,重点就在pi的表示上,pi最精确的表示方式是ac ...

  5. npm参考手册

    一 权限操作 npm允许通过scope组织私有包,通过team细化权限控制 npm官方仓储有两种类型的包,普通包和scope包 普通包特征: - 只能公有,谁都可以下载使用 - 仅可以通过所有者(ow ...

  6. java生成饼图

    pom.xml文件导入依赖包 <!-- https://mvnrepository.com/artifact/org.jfree/jfreechart --> <dependency ...

  7. 20180110labview串口传输实时显示相关内容

    下一步:1.在原有文件不变的基础上,输出实时波形文件,完整的4pmt4ld,并将对应的源探布配通道编号显示在面板上,对应的通道数据索引输出.2.在一次测量OK的那个文件里用while指定字节读取,注意 ...

  8. PHP生成word文档的三种实现方式

    PHP生成word原理 利用windows下面的 com组件 利用PHP将内容写入doc文件之中 具体实现: 利用windows下面的 com组件 原理:com作为PHP的一个扩展类,安装过offic ...

  9. 有用户及目录判断的删除文件内容的Shell脚本

    [root@localhost Qingchu]# cat Qingchu_version2.sh #!/bin/bash #描述: # 清除脚本! #作者:孤舟点点 #版本:2.0 #创建时间:-- ...

  10. Python Web 基础向（四） 浅谈数据层

    数据层一般会给人带来一些困扰,在于其定位不准确.聚合Model的工作也可以放在逻辑层做,但会导致逻辑层变重,经常出现大段晦涩代码.因此我的建议是保留Model聚合层,尽管会导致工作量的略微增加,但却可 ...