240 　　 　　
　　　　Alex 　　
　　
　　　　每个人都有属于自己的一片森林，也许我们从来不曾去过，但它一直在那里，总会在那里。迷失的人迷失了，相逢的人会再相逢！ 　　

django-ajax

Ajax准备知识：json

什么是json？

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。
它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
讲json对象，不得不提到JS对象：



json：数据交换格式
json是JS的子集
json只认双引号
json一定是一个字符串
["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["张三", "李四"] }
[ { "name": "张三"}, {"name": "李四"}
json字符串需要注意的
属性名必须是双引号
不能使用十六进制数
不能使用undefined
不能使用函数和日期对象

stringify与parse方法

在html前端页面中可以使用
1.JSON.stringify()
JSON.stringify()           #将用于将JavaScript值转换为JSON字符串
var data=JSON.stringify('{name:"Yang"}')
2.JSON.parse()
JSON.parse()                 #将用于将JSON字符串转换为JavaScript对象
var data=JSON.parse('{"name":"Yang"}')
示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var date=JSON.stringify('{name:"Yang"}');    #序列化
            console.log(date);            
            console.log(typeof date);            #string  json字符串
        var date1=JSON.parse('{"name":"Yang"}');      #反序列化
            console.log(date1);
            console.log(typeof date1)       #object json对象
    </script>
</head>
<body>

</body>
</html>
输出结果：
 

AJAX和XML的区别

JSON格式是于2001年由Douglas Crockford提出，目的就是取代繁琐笨重的XML格式。
JSON格式有两个显著的有点：书写简单，一目了然；符合JavaScript原生语法，可以由解释引擎直接处理，不用另外添加解析代码，所以JSON迅速被接受，已经成为各大网站交互数据的标准格式，并被写如ECMAScript5，成为标准的一部分。
XML和JSON都使用结构化方法来标记数据，下面来做一个简单的比较
用XML表示中国部分省市数据：
<?xml version="1.0" encoding="utf-8"?>
<country>
    <name>中国</name>
    <province>
        <name>黑龙江</name>
        <cities>
            <city>哈尔滨</city>
            <city>大庆</city>
        </cities>
    </province>
    <province>
        <name>广东</name>
        <cities>
            <city>广州</city>
            <city>深圳</city>
            <city>珠海</city>
        </cities>
    </province>
    <province>
        <name>台湾</name>
        <cities>
            <city>台北</city>
            <city>高雄</city>
        </cities>
    </province>
    <province>
        <name>新疆</name>
        <cities>
            <city>乌鲁木齐</city>
        </cities>
    </province>
</country>
用JSON表示如下：
{
    "name": "中国",
    "province": [{
        "name": "黑龙江",
        "cities": {
            "city": ["哈尔滨", "大庆"]
        }
    }, {
        "name": "广东",
        "cities": {
            "city": ["广州", "深圳", "珠海"]
        }
    }, {
        "name": "台湾",
        "cities": {
            "city": ["台北", "高雄"]
        }
    }, {
        "name": "新疆",
        "cities": {
            "city": ["乌鲁木齐"]
        }
    }]
}
　　可以看到，JSON 简单的语法格式和清晰的层次结构明显要比 XML 容易阅读，并且在数据交换方面，由于 JSON 所使用的字符要比 XML 少得多，可以大大得节约传输数据所占用得带宽
注意：
JSON格式取代了xml给网络传输带来了很大的便利,但是却没有了xml的一目了然,尤其是json数据很长的时候,我们会陷入繁琐复杂的数据节点查找中。
但是国人的一款在线工具 BeJson 、SoJson在线工具让众多程序员、新接触JSON格式的程序员更快的了解JSON的结构，更快的精确定位JSON格式错误。

Ajax简介

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

  • 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
  • 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

ajax实现的局部刷新
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .error{
            color:red
        }
    </style>
</head>
<body>


<form class="Form">

    <p>姓名&nbsp;&nbsp;<input class="v1" type="text" name="username" mark="用户名"></p>
    <p>密码&nbsp;&nbsp;<input class="v1" type="text" name="email" mark="邮箱"></p>
    <p><input type="submit" value="submit"></p>

</form>

<script src="jquery-3.2.1.min.js"></script>

<script>
    $(".Form :submit").click(function(){
        flag=true;
        $("Form .v1").each(function(){
            var value=$(this).val();
            if (value.trim().length==0){
                 var mark=$(this).attr("mark");
                 var $span=$("<span>");
                 $span.html(mark+"不能为空!");
                 $span.prop("class","error");
                 $(this).after($span);

                 setTimeout(function(){
                      $span.remove();
                 },800);
                 flag=false;
                 return flag;
            }
        });
        return flag
    });
</script>
</body>
</html>

AJAX常见应用情景

当我们在百度中输入一个“老”字后，会马上出现一个下拉列表！列表中显示的是包含“传”字的4个关键字。

其实这里就使用了AJAX技术！当文件框发生了输入变化时，浏览器会使用AJAX技术向服务器发送一个请求，查询包含“传”字的前10个关键字，然后服务器会把查询到的结果响应给浏览器，最后浏览器把这4个关键字显示在下拉列表中。

  • 整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
  • 当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！



当输入用户名后，浏览器会通过AJAX技术把用户输入的内容返回给服务器然后在后端数据库里查找用户名是否存在，最终服务器返回数据库有了则返回用户名已存在
  • 整个过程中页面没有刷新，只是局部刷新了；
  • 在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；

AJAX的优缺点

优点：

  • AJAX使用Javascript技术向服务器发送异步请求；
  • AJAX无须刷新整个页面；
  • 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；

jquery实现的ajax






	jquery实现的Ajax
	
	     $.ajax({
		      url: ""    ,// 请求路径
			  type:""    ,// 请求方式
			  success：function(data){
			      
			  }
			  
		 })


        	 参数：
		     data：{"name":"yuan"}
		     if  processData=false：不对数据做预处理，不涉及编码类型
		     if  processData=true：
			                      设计编码类型：
								  contentType：默认值: "application/x-www-form-urlencoded"
	

<!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>
</head>
<body>

<a href="/get_OK/">点击</a><span class="error"></span>
<hr>
<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 () {
        // ajax请求

        $.ajax({
            url:"/get_ajax/",
            type:"GET",
          data:JSON.stringify({                                     //  接受用户的数据进行序列化
               name:$(":text").val(), 
               pwd:$(":password").val()
            }),    // 请求数据 ，是js数据    ?name=yuan&pwd=123
            contentType:"application/json",
           success:function (data) {              // success是返回的
             var data=JSON.parse(data);         //   进行反序列化JSON.parse(data)
                console.log(data);
                console.log(typeof data);
                // $(".error").html(data)

                if(!data["flag"]){
                    $(".login_error").html("用户名或者密码错误")
                }


            }
        })



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



#================================================vivews
from django.shortcuts import render,HttpResponse

# Create your views here.


def index(request):
    # import  time
    # time.sleep(10)
    return render(request,"index.html")

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

def get_ajax(request):

    username=request.GET.get("name")
    password=request.GET.get("pwd")
    print(username,password)

    response={"flag":False}
    if username=="yuan" and password=="123":
        response["flag"]=True
    import json
    import time

    # time.sleep(10)
    return HttpResponse(json.dumps(response))

进行预编译
 

$.ajax参数


          1.  url:"/get_ajax/",   #当触发事件是要跳转的页面
          2.  type:"GET",          #指定用什么方式发送数据
          3.  data:JSON.stringify({                                     #当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式(urlencoded:?a=1&b=2)发送给服务端；此外，ajax默认以get方式发送请求。 //  接受用户的数据进行序列化
               name:$(":text").val(), 
               pwd:$(":password").val()
            }),    // 请求数据 ，是js数据    ?name=yuan&pwd=123
           4. contentType:"application/json",             #默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据，比如contentType:"application/json"，即向服务器发送一个json字符串：
           5. success:function (data) {     }        #用于接收服务端返回的数据
            
           6.processData：
        #声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false，那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString(),最后得到一个［object，Object］形式的结果。
            7.traditional：一般是我们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]},
              traditional为false会对数据进行深层次迭代；

csrf跨站请求伪造

当使用post请求发送数据时，会被Forbidden掉
 要通过csrf_toke进行给服务器一个随机验证码，只有通过这个随机验证码才能post请求。

方式1

$.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});
示例：
    <script>
        $(".btn-danger").click(function () {
             $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
            });
            //         ajax请求
            $.post({

                url:"/delbook/",
                data:{
                    val:$('#data').text()
                },
            success:function (data) {
                if (data){
                    $('#del').parent().parent().remove();
                    alert('成功')
                }
            }

            })
        })
    </script>

方式一虽然可以做到，但是有局限性，要js和html页面要写在一起，然后{{ csrf_token }}才能通过模板语法来渲染出来，一旦js和html页面分开写的话就不能通过模板来渲染出来了，就会出错

方式2

 
既然方式一有局限性不能分文件来运行，既然crsf_tornk是给服务器发一个随机验证码，那么何不自己定制一个呢
/**
 * Created by root on 2017/11/14.
 */


        $(".btn-danger").click(function () {

            //         ajax请求
            $.post({
                url:"/delbook/",
                data:{
                    val:$('#data').text(),
                    csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()   #在html中通过csrf来后面是一个随机验证码，通过data来发送给服务器
                },
            success:function (data) {
                if (data){
                    $('#del').parent().parent().remove();
                    alert('成功')
                }
            }
            })
        });

方式3：

通过导入文件来进行验证，通过cookie发送给服务器
 <script src="{% static 'js/jquery.cookie.js' %}"></script>  
    
    $.ajax({
            url:"/get_ajax/",
            type:"POST",
            headers:{"X-CSRFToken":$.cookie('csrftoken')},
            data:{
               name:$(":text").val(),
               pwd:$(":password").val(),
            },    // 请求数据 ，是js数据    ?name=yuan&pwd=123

jQuery.serialize()

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

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

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

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

当input框过多时，通过ajax发送的话键值对要自己写太多了，是不是很麻烦。

语法


1
jQueryObject.serialize( )

返回值

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







上传文件

form表单上传文件

def upload(request):
    if request.method=="POST":
        print(request.POST)                     #post请求拿不到具体的数据，只能拿到图片的名字
        f_obj=request.FILES.get("upload_file_form")    #通过FILES.get拿到input框中的文件的name，然后获得一个文件句柄
        # s=open()
        print(f_obj.name)
        with open(f_obj.name,"wb") as s:       #二进制读取
            for i in f_obj:
                print(i)
                s.write(i)                    #然后把内容保存进去

    return render(request,"uploading.html")




#==============================================前端页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/upload/" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <p><input type="file" name="upload_file_form"></p>
    <input type="submit">
</form>
</body>
</html>
输出结果：当我上传一张图片时，要进行二进制存储，不指定存储路径的话，会放在默认的django路径中






Ajax(FormData)

FormData是什么呢？

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.
所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% csrf_token %}



<form action="" id="s1">
    <p>姓名<input type="text"></p>
    <p>密码<input type="password"></p>
    <p>头像<input type="file" id="upload_avatar"></p>
</form>

<p><button class="Ajax_send">Ajax_send</button><span class="login_error"></span></p>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
         function foo() {
        $(".login_error").html("")
    }
    $(".Ajax_send").click(function () {

        var formData=new FormData();
        formData.append("username",$(":text").val());
        formData.append("password",$(":password").val());
        formData.append("avatar",$("#upload_avatar")[0].files[0]);      #找到这个input框中上传的二进制文件只能上传一个
        // ajax请求
        $.ajax({
            url:"/delbook/",
            type:"POST",
            headers:{"X-CSRFToken":$.cookie('csrftoken')},
            data:formData,
            contentType:false,
            processData:false,
            success:function (data) {
                var data=JSON.parse(data);
                console.log(data);
                console.log(typeof data);
                // $(".error").html(data)

                if(!data["flag"]){
                    $(".login_error").html("用户名或者密码错误")
                    setTimeout(foo,3000)
                }


            }
        })

</script>
</body>
</html>





















posted @ 2017-11-25 15:24  Alex_c  阅读(183)  评论(0)    收藏  举报