ajax补充--------FormData等...

一、熟悉知识点

1、什么是json字符串?

  轻量级的数据交换格式

2、定时器:关于setTimeout

setTimeout(foo,3000)  # 3000表示3秒,foo表示一个函数,3秒后执行foo函数

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Title</title>
    <style>
        .login_error{
            color: red;
        }
    </style>
</head>
<body>

<a href="/get_OK/">点击</a><span class="error"></span>
<hr>
{% csrf_token %}
<p>姓名<input type="text"></p>
<p>密码<input type="password"></p>
<p><button class="Ajax_send">Ajax_send</button><span class="login_error"></span></p>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script>
    $(".Ajax_send").click(function () {
        function foo() {
             $(".login_error").html("");  //3秒后清空
        }
        //方式一
        $.ajaxSetup({
            data:{csrfmiddlewaretoken:‘{{ csrf_token }}‘}
        });
        // ajax请求
        $.ajax({
            url:"/get_ajax/",//请求路径
            type:"POST",//请求方式
            //吧js对象转成json字符串
            data:{
{#                    方式三#}
{#                 csrfmiddlewaretoken:$("[name=‘csrfmiddlewaretoken‘]").val(),#}
                 name:$(":text").val(),pwd:$(":password").val()
            },success:function (data) {
                var data=JSON.parse(data);  //js中的反序列化
                console.log(data);
                console.log(typeof data);
                if(!data["flag"]){   //为False的情况
                    $(".login_error").html("用户名或者密码错误");
                    setTimeout(foo,3000)
                }
            }
        })
    })
</script>
</body>
</html>

复制代码

3、ajax的参数补充

   - type不写的话默认是GET

  - dataType和ContentType:

    dataType: 浏览器发给服务器希望返回的数据类型 。。如果我们明确地指定目标类型,就可以使用data Type。

    ContentType:
      请求头里有:浏览器告诉服务器内容的类型
      响应头里也有:服务器响应浏览器的内容

4、JS和JQuery对象之间的转换

  jQuery对象加[0]就转换成了dom对象
  dom对象加$符就转换成了jquery对象

5、processDate 默认为True ,预处理;     如果改为False,不做预处理

 

二、csrf跨站请求伪造

如果把type:"GET"  改为type:"POST" 会报一个Forbidden的错

解决办法有三种:

方式一:

     $.ajaxSetup({
            data:{csrfmiddlewaretoken:‘{{ csrf_token }}‘}
        });
     注意:要放在ajax请求的前面,在发送之前组装一组字符串,在第一步render的时候就发了
     所以有局限性:
        如果把JS代码放到静态文件中,不会渲染,不会执行{{csrf_token}},只能在HTML页面中使用

方式二:自己组装一组键值对  ( 推荐)

复制代码

<form>
{% csrf_token %}
</form> data:{ csrfmiddlewaretoken:$(
"[name=‘csrfmiddlewaretoken‘]").val(), name:$(":text").val(),pwd:$(":password").val() },

复制代码

方式三:自己设置头信息

复制代码

<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
$.ajax({ url:"/serialize/",type:"POST",headers:{"X-CSRFToken":$.cookie(‘csrftoken‘)}, })

复制代码

三、jQuery.serialize()

serialize()函数用于序列化一组表单元素,将表单内容编码为用于提交的字符串

serialize()函数常用于将表单内容序列化,以便用于AJAX提交。

该函数主要根据用于提交有效表单控件的name和value,将它们拼接为一个可直接用于表单提交的文本字符串,该字符串已经过标准的URL编码处理(字符集编码为UTF-8)。

该函数不会序列化不需要提交的表单控件,这和常规的表单提交行为是一致的。例如:不在<form>标签内的表单控件不会被提交没有name属性的表单控件不会被提交带有disabled属性的表单控件不会被提交没有被选中的表单控件不会被提交。

与常规表单提交不一样的是:常规表单一般会提交带有name的按钮控件,而serialize()函数不会序列化带有name的按钮控件。更多详情请点击这里。

语法:

jQueryObject.serialize( )

serialize()函数的返回值为String类型,返回将表单元素编码后的可用于表单提交的文本字符串。

请参考下面这段初始HTML代码:

复制代码

<form name="myForm" action="http://www.365mini.com" method="post">
    <input name="uid" type="hidden" value="1" />
    <input name="username" type="text" value="张三" />
    <input name="password" type="text" value="123456" />
    <select name="grade" id="grade">
        <option value="1">一年级</option>
        <option value="2">二年级</option>
        <option value="3" selected="selected">三年级</option>
        <option value="4">四年级</option>
        <option value="5">五年级</option>
        <option value="6">六年级</option>
    </select>
    <input name="sex" type="radio" checked="checked" value="1" /><input name="sex" type="radio" value="0" /><input name="hobby" type="checkbox" checked="checked" value="1" />游泳
    <input name="hobby" type="checkbox" checked="checked" value="2" />跑步
    <input name="hobby" type="checkbox" value="3" />羽毛球
    <input name="btn" id="btn" type="button" value="点击" />
</form>

复制代码

 对<form>元素进行序列化可以直接序列化其内部的所有表单元素。

// 序列化<form>内的所有表单元素
// 序列化后的结果:uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2
alert( $("form").serialize() );

我们也可以直接对部分表单元素进行序列化。

// 序列化所有的text、select、checkbox表单元素
// 序列化后的结果:username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2
alert( $(":text,select,:checkbox").serialize() );

示例:

分享图片

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width">
 7     <title>Title</title>
 8 </head>
 9 <body>
10 <form name="myForm" action="http://www.365mini.com" method="post">
11     <input name="uid" type="hidden" value="1" />
12     <input name="username" type="text" value="张三" />
13     <input name="password" type="text" value="123456" />
14     <select name="grade" id="grade">
15         <option value="1">一年级</option>
16         <option value="2">二年级</option>
17         <option value="3" selected="selected">三年级</option>
18         <option value="4">四年级</option>
19         <option value="5">五年级</option>
20         <option value="6">六年级</option>
21     </select>
22     <input name="sex" type="radio" checked="checked" value="1" />23     <input name="sex" type="radio" value="0" />24     <input name="hobby" type="checkbox" checked="checked" value="1" />游泳
25     <input name="hobby" type="checkbox" checked="checked" value="2" />跑步
26     <input name="hobby" type="checkbox" value="3" />羽毛球
27     <input name="btn" id="btn" type="button" value="点击" />
28 </form>
29 <script src="/static/jquery-3.2.1.min.js"></script>
30 <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
31 <script>
32     $("#btn").click(function () {
33 {#        方式一#}
34         //$.ajaxSetup({
35           // data:{csrfmiddlewaretoken:‘{{ csrf_token }}‘}
36         //});
37         $.ajax({
38             url:"/serialize/",39             type:"POST",40 {#            方式三#}
41             headers:{"X-CSRFToken":$.cookie(csrftoken)},42             //data:$("form").serialize(),//序列form表单所有的
43             data:$(":text,:password,:checkbox").serialize(),//序列自己选择的
44             success:function (data) {
45                 var data=JSON.parse(data);  //js中的反序列化
46                 console.log(data);
47                 console.log(typeof data);
48                 $(".error").html(data);
49             }
50         })
51     })
52 </script>
53 </body>
54 </html>
serialize.html

分享图片

1 def serialize(request):
2     # form = request.POST
3     # print(form)
4     name = request.POST.get("username")
5     password = request.POST.get("password")
6     checked = request.POST.getlist("hobby")
7     print(name,password,checked)
8     return HttpResponse(json.dumps(name))
views.py

复制代码

当有好多input的时候,就得一一对应的吧所有的数据发过去的,这样显得麻烦,我们用序列化
jQuery.serialize()

data:$("form").serialize(),//序列form表单所有的
data:$(":text,:checkbox").serialize(),//序列自己选择的

在服务端获取数据
form = request.POST   
print(form)   #获取所有
name = request.POST.get("username")
password = request.POST.get("password")
checked = request.POST.getlist("hobby")
print(name,checked)#获取单个

复制代码

四、上传文件

1、Form表单上传文件

文件和其他的数据类型不一样,是一个二进制的形式
Form上传文件的时候切记要加上:enctype="multipart/form-data"

formupload.html

复制代码

<form action="/formupload/" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <p>姓名:<input type="text" name="username"></p>
    <p>密码:<input type="password" name="password"></p>
    <p>头像:<input type="file" name="file"></p>
    <p><input type="submit" value="提交"></p>
</form>

复制代码

view.py

复制代码

def formupload(request):
    if request.method == "POST":
        username = request.POST.get("username")
        password = request.POST.get("password")
        # file = request.FILES   #拿到的是一个句柄
        file_obj = request.FILES.get("file")
        print(file_obj,file_obj.name)
        print(type(file_obj),type(file_obj.name))   #<class ‘django.core.files.uploadedfile.InMemoryUploadedFile‘>   <class ‘str‘>
        with open(file_obj.name,"wb") as f:
            for i in file_obj:
                f.write(i)
        return HttpResponse("上传成功...")
    return render(request,"formupload.html")

复制代码

2、Ajax上传文件(利用FormData):既可以处理二进制,又可以处理字典,列表啊等

FormData是什么呢?

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.
所有主流浏览器的较新版本都已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
注意:下文中的几个需要解释的
$("#upload") 拿到的是一个集合
$("#upload")[0]  就是一个dom对象
$("#upload")[0].files   拿到的是一个filelist
$("#upload")[0].files[0]  拿到的是当前最近的文件对象 

要是使用FormData一定要加上:

一定要加上:

  contentType:false
  processDate:false #不做预处理

ajaxupload.html

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
</head>
<body>
<p>姓名<input type="text" name="username"></p>
<p>头像<input type="file" id="upload"></p>
<p><button class="btnnn">提交</button><span class="tishi"></span></p>
<script src="/static/jquery-3.2.1.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
    $(".btnnn").click(function () {
         var formData=new FormData();
        formData.append("username",$(":text").val());
        formData.append("file",$("#upload")[0].files[0]);
        $.ajax({
            url:"/get_upload/",type:"POST",headers:{"X-CSRFToken":$.cookie(csrftoken)},data:formData,contentType:false,processData:false,success:function (data) {
                $(".tishi").html("上传成功")
            }

        })
    })
</script>
</body>
</html>

复制代码

 view.py

复制代码

def ajaxupload(request):
    return render(request,"ajaxupload.html")

def get_upload(request):
    if request.method == "POST":
        print("FIFLE",request.FILES)
        file_obj = request.FILES.get("file")
        print(file_obj.name,"-----")
        file_obj = request.FILES.get("file")
        with open(file_obj.name,"wb") as f:
            for i in file_obj:
                f.write(i)
        return HttpResponse("上传成功")

复制代码

 

时间:2019-10-02 23:10:18 阅读(6)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


$.AJAX()方法中的PROCESSDATA参数 在使用jQuery的$.ajax()方法的时候参数processData默认为true(该方法为jQuery独有的) 默认情况下会将发送的数据序列化以适应默认的内容类型application/x-www-form-urlencoded 如果想发送不
form表单提交的几种方式 表单提交方式一:直接利用form表单提交 html页面代码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot; /&gt; &lt;title&gt;Ins
文章浏览阅读1.3k次。AJAX的无刷新机制使得在注册系统中对于注册名称的检测能即时显示。常见的用户注册是用户输入用户名,后台程序检测数据库中用户名是否重复而做出注册的成功与失败之提示(当用户注册重名时将返回重新注册),或者稍微人性化一点就是在用户名文本框后添加一个检测按钮,让用户检测后再做注册。以上操作,对于用户体验方面来说是比较“差劲”的,一个很好的用户体验就是:当用户输入完注册用户名后,Web系统应能即时检查并即时_用户注册 实时异步检测
文章浏览阅读1.2k次。 本文将解释如何使用AJAX和JSON分析器在客户端和服务器之间创建复杂的JSON数据传输层。一、 引言毫无疑问,AJAX已经成为当今Web开发中一种强有力的用户交互技术,但是它的许多可能性应用仍然鲜为人知。在本文中,我们将来共同探讨如何 使用JavaScript对象标志(JSON)和JSON分析器在服务器和客户端AJAX引擎之间创建复杂而强有力的JSON数据传输层。我们将_ajax技术可行性
文章浏览阅读2.2k次。/************************** 创建XMLHttpRequest对象 **************************/function CreateRequest(){ var xmlObj = null; try { xmlObj = new XMLHttpRequest(); } catch(e) {
文章浏览阅读3.7k次。在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就会把前面的覆盖 掉,如果每次都创建一个新的XMLHttpRequest对象,也会造成浪费。解决的办法就是创建一个XMLHttpRequset的对象池,如果池里有 空闲的对象,则使用此对象,否则将创建一个新的对象。下面是我最近写的一个简单的类:* XMLHttpReques_xmlhttprequest发送多个请求
文章浏览阅读3.1k次。Ajax 同一页面如何同时执行多个 XMLHTTP 呢,比如博客页,需要同时利用 Ajax 读取作者信息、文章信息、评论信息……我们的第一反应可能是创建多个全局 XMLHTTP 对象,但这并不现实。其实实现方式非常简单,就是给 onreadystatechange 对应的回调函数加上参数,以下代码是解决方案中一个函数中的一段代码。xmlhttp.open("GET", "ajax_proc_ajax响应多个mxl文件
文章浏览阅读1.5k次。数据岛指的是存在Html网页中的xml代码段,它在Html中形成了一个数据的集合,数据岛允许我们在Html网页中集成xml,对xml编写脚本.数据岛有它特有的形式,由标记xml开始,在开始标记中要有一个ID属性,用于指定该指定数据岛的名称。 (当然要以/xml结束).元素xml包含的内容就是xml代码。数据岛也分为2种:1)内嵌的数据岛形式2)外嵌的数据岛形式说了那么多废话,还_数据中岛计算模式
文章浏览阅读2.1k次。AJAX 流行之后,总想好好学习一下。但是众多的框架实在难以选择。说明一下 ASP.NET AJAX 并不包括在 AJAX 框架之中。刚开始学了 JQuqery, 众多的 $get(),...等等符号早已把我搞晕了。暂时就放弃了。后来学习 ASP.NET AJAX ,在微软的领导下,逐渐由服务器端转向客户端编程。 激起我客户端编程的兴趣,才想起学习一下了 Jquery. 随着WEB2._jquery ajax asp.net 认证
文章浏览阅读1.7k次。前段时间在用google map api的函数库的时候,发现里面的downloadUrl函数非常好用,所以自己写了一个。用腻了那些什么框架什么池,到头来发现越简单的东西越是适合我这种懒人。downloadUrl(url, callback, data);参数说明: url不用说了; callback是回调函数,函数调用的时候会有两个参数:data, responseCode,data就_xmlhttprequest downloadurl
文章浏览阅读956次。前些时间写了几篇关于XMLHTTP运用的实例.(可以到http://dev.csdn.net/user/wanghr100看之前的几编关于XMLHTTP的介绍.)近来看论坛上经常有人提问关于如何无刷新,自动更新数据.传统上,我们浏览网页,如果加入最新的数据.只能是等我们重新向服务器端请求时才能显示出来.但是,对于一些时效性很强的网站.传统的这种做法是不能满足的.我们可以让程序自动刷新.定时_后端xml怎么实现数据有救新增,没有就更新
文章浏览阅读3.3k次。 XMLHttpRequest调用XMLHttpRequest Call ●●●调用,回调,下载,抓取,实时,查询,远程通信(Remoting),远程通信脚本(RemoteScripting),同步,上传,XMLHttpRequest图6-2:XMLHttpRequest调用 目标故事Reta正在一个批发商网站上购买商品。每次她添加一个商品到购物车时,web站点发出_createxmlhttpre
文章浏览阅读1.3k次。function clearitem(){ var drp1 = document.getElementById("drp1"); while(drp1.options.length>0) { drp1.options.remove(0); } }//动态更改方法(根据城市代码取得该市商业区并添加到DropDownList中_dropdownlist根據動態變化
文章浏览阅读1.9k次。因為 Json.net 是有附原始碼的,他也附了單元測試的專案,底下是我額外增加的UnitTest,我的目標就是讓底下的測試可以pass,而且原來的Test 也要都能通過。 ValueTypeTest.csusing System;using NUnit.Framework;namespace Newtonsoft.Json.Test { [TestFixture] public cl_vb 無效的 json 基本型別
文章浏览阅读844次。利用XMLHTTP无刷新获取数据. 客户端和服务器端数据的交互有几种方法.1.提交,通过提交到服务器端.也称"有刷新"吧.2.通过XMLHTTP无刷新提交到服务器端,并返回数据.也称"无刷新"吧.利用XMLHTTP我们可以实现很多很强大的应用.这文章主要介绍它的一些简单的应用.附:因为XMLHTTP是IE5.0+支持的对象.所以你必须要有IE5.0+才能看到效果.client.htm_xmlhttp取源码没有更新
文章浏览阅读1.8k次。Json.Net 無法序列基本型別(string, int),Asp.Net Ajax 無法正確序列日期,AjaxPro序列出我不想要的_type字串 1. Json.Net 是我最常使用的序列/反序列json套件,標榜速度快,對於一對多關係的object 也都能正常運作, 己能滿足我平日的需要,但前幾天突然有個情況,我要序列的是一個泛型參數,該參數不一定是物object型別,有可能是st_token string in state start
文章浏览阅读1.3k次。转载自:http://www.cnblogs.com/JeffreyZhao/archive/2007/01/31/update_the_updatepanels_by_js.html众 所周知,UpdatePanel是通过Trigger来更新的。被设定为Trigger的控件在PostBack之后会被客户端所截获,并且使用 XMLHttpRequest对象发送内容,然后服务器端由ScriptMan_web.ui.updatepanel 和 updatepanel 的区别
文章浏览阅读1.9k次。有些时候,只是需要更新页面的一个部分甚至只是更新中间的几个数据却需要从服务器DOWN整个页面,导致各种资源的浪费。使用数据岛技术可以很好的解决这个问题:通过定时器或用户事件触发数据岛(XML对象)象服务器获取数据,在数据获取完成后,适时更新相关数据。示例HTML部分:http://localhost/WebService/LoadData/FeaturedService.asmx/GetScore_web数据岛
文章浏览阅读1k次。在页面上使用ActiveXObject的代价是很大的,如果我们的无刷新页面使用xmlhttp技术,我们或许需要频繁的建立xmlhttp对象,当然 我们也可以使用全局变量来cache一个xmlhttp对象实例。但是这样的方法适合于同步方式xmlhttp通信,而对于异步方式xmlhttp通信将 会出现问题。由于没有了进程的堵塞,用户可能再次调用同一个xmlhttp实例,如果这时前一个通信未完成,那么就
文章浏览阅读998次。 by Lokesh Dhakar 译: croc查看原文概要:Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.最新更新 Version 2.0 图片集: 分组相关的图片并且能轻松的导航它们 视觉特效: 奇特的自适应调整 向后兼容: yes! 点击这里查看实例_on lightbox 2 by lokesh dhakar