澳门新葡萄京娱乐网站-澳门新葡萄京888官网-所有平台

热门关键词: 澳门新葡萄京娱乐网站,澳门新葡萄京888官网

django中的ajax组件教程精解_php实例_脚本之家,D

作者: 编程知识  发布:2019-12-22

Ajax(Asynchronous Javascript And XML卡塔尔(قطر‎翻译成阿尔巴尼亚语就是“异步Javascript和XML”。即用Javascript语言与服务器举办异步人机联作,传输的多寡为XML,。

上传格局:

向服务器发送诉求的门径

- Form表单上传文件

Ajax策动知识:json

1.浏览器地址栏 默许是get央求2.form表单发送恳求:GET央求POST要求3.a标签 href属性 暗许是get乞请4.ajax(卡塔尔国

  • Ajax上传文件
  • 根据form表单和iframe自个儿实现ajax央浼

什么是json?

定义:

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

讲json对象,不能不提到JS对象:

澳门新葡萄京娱乐网站, 

澳门新葡萄京娱乐网站 1

 

合格的json对象:

澳门新葡萄京娱乐网站 2澳门新葡萄京娱乐网站 3

["one", "two", "three"]

{ "one": 1, "two": 2, "three": 3 }

{"names": ["张三", "李四"] }

[ { "name": "张三"}, {"name": "李四"} ] 

View Code

 比不上格的json对象:

澳门新葡萄京娱乐网站 4澳门新葡萄京娱乐网站 5

{ name: "张三", 'age': 32 }                     // 属性名必须使用双引号

[32, 64, 128, 0xFFF] // 不能使用十六进制值

{ "name": "张三", "age": undefined }            // 不能使用undefined

{ "name": "张三",
  "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
  "getName":  function() {return this.name;}    // 不能使用函数和日期对象
}  

View Code

Ajax的特点

1,创制项目

stringify与parse方法

 

JSON.parse():     用于将一个 JSON 字符串转换为 JavaScript 对象 
eg:
console.log(JSON.parse('{"name":"Yuan"}'));
console.log(JSON.parse('{name:"Yuan"}')) ;   // 错误
console.log(JSON.parse('[12,undefined]')) ;   // 错误



JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。 
eg:  console.log(JSON.stringify({'name':"egon"})) ; 

 

异步交互作用:顾客端发送三个需要后,不须求等待服务器响应甘休,就能够发送第二个央浼;

澳门新葡萄京娱乐网站 6

和XML的比较

JSON 格式于二零零四年由 DougRuss Crockford 提议,目标就是代表繁杂笨重的 XML 格式。

JSON 格式有四个肯定的亮点:书写轻易,映重视帘;符合 JavaScript 原生语法,能够由解释引擎直接管理,不用此外加上深入解析代码。所以,JSON飞速被选择,已经改为各大网址调换数据的科班格式,并被写入ECMAScript 5,成为专门的学业的意气风发局地。

XML和JSON都采纳布局化方法来标识数据,上面来做二个轻巧易行的可比。

用XML表示中夏族民共和国有的省市数据如下:

澳门新葡萄京娱乐网站 7澳门新葡萄京娱乐网站 8

<?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>

View Code

用JSON表示如下:

澳门新葡萄京娱乐网站 9澳门新葡萄京娱乐网站 10

{
    "name": "中国",
    "province": [{
        "name": "黑龙江",
        "cities": {
            "city": ["哈尔滨", "大庆"]
        }
    }, {
        "name": "广东",
        "cities": {
            "city": ["广州", "深圳", "珠海"]
        }
    }, {
        "name": "台湾",
        "cities": {
            "city": ["台北", "高雄"]
        }
    }, {
        "name": "新疆",
        "cities": {
            "city": ["乌鲁木齐"]
        }
    }]
}

View Code

 

  能够见到,JSON 轻便的语法格式和显然的档次布局鲜明要比 XML 轻松阅读,而且在数据调换方面,由于 JSON 所使用的字符要比 XML 少得多,可以大大得节约传输数据所占用得带宽。

注意:

JSON格式代替了xml给互连网传输带来了不小的有益,但是却从没了xml的洞察,尤其是json数据十分长的时候,我们会陷入繁缛复杂的数目节点查找中。

唯独国人的后生可畏款在线工具 BeJson 、SoJson在线工具让不菲程序员、新接触JSON格式的程序猿越来越快的打听JSON的布局,越来越快的准确定位JSON格式错误。

 

局部刷新:浏览器页面局部刷新

2,settings配置(注册app01,static路线等等那么些)及url增加(略过)

Ajax简介

AJAX(Asynchronous Javascript And XML)翻译成汉语正是“异步Javascript和XML”。尽管用Javascript语言与服务器实行异步人机联作,传输的数据为XML(当然,传输的数据不只是XML)。

  • 一同交互作用:顾客端发出三个倡议后,要求拭目以俟服务器响应甘休后,手艺生出第贰个央求;
  • 异步交互作用:客商端发出叁个央求后,无需等待服务器响应甘休,就能够发生第三个央浼。

AJAX除了异步的性状外,还会有一个正是:浏览器页面有的刷新;(那后生可畏特征给顾客的感触是在无形中中达成央求和响应进度)

js实现的部分刷新:

澳门新葡萄京娱乐网站 11澳门新葡萄京娱乐网站 12

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

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


<form class="Form">

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

</form>

<script src="jquery-3.1.1.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.html(mark+"不能为空!");
                 $span.prop("class","error");
                 $(this).after($span);

                 setTimeout(function(){   //设置计时器,0.8秒后删除span标签
                      $span.remove();
                 },800);

                 flag=false;
                 return flag;

            }
        });
        return flag
    });


</script>


</body>
</html>

View Code

  

一些刷新的意趣正是当我们在天涯论坛登记四个新的博客的时候,当大家输入客户名后鼠标移开的时候,就发送了一个伸手,去注脚那几个顾客是不是存在,假如存在,则公告客商该顾客名已经被登记了。

3,views视图函数

AJAX**科学普及应用项景**

当我们在百度中输入二个“老”字后,会立即现身三个下拉列表!列表中显示的是包罗“传”字的4个重大字。

实在此就使用了AJAX本事!当文件框发生了输入变化时,浏览器会使用AJAX能力向服务器发送三个伸手,查询包括“传”字的前13个重要字,然后服务器会把询问到的结果响应给浏览器,最终浏览器把那4个重大字显得在下拉列表中。

  • 风流罗曼蒂克体经过中页面未有刷新,只是刷新页面中的局地地点而已!
  • 当呼吁发出后,浏览器还是能实行任何操作,无需等待服务器的响应!

       澳门新葡萄京娱乐网站 13

 

当输入客商名后,把光标移动到任何表单项上时,浏览器会使用AJAX本领向服务器发出须要,服务器会询问名称叫zhangSan的顾客是或不是留存,最后服务器重返true表示名称为lemontree7777777的客商已经存在了,浏览器在获得结果后显得“顾客名已被登记!”。

  • 总体经过中页面未有刷新,只是部分刷新了;
  • 在央求发出后,浏览器不用等待服务器响应结果就能够进行别的操作;

基于jquery实现的ajax请求

form的视图收到了在request.FILES中的文件数量。从上述form来的数码足以经过request.FILES['file']来存取。
非常注意的是,唯有当request方法是POST,且发送request的<form>有属性enctype="multipart/form-data"时,request.FILES中包括文件数量,否则request.FILES为空。

AJAX**的利害**

让我们利用pycharm重新成立贰个门类,项目名称叫Ajax_demo,应用名字为app01。

from django.shortcuts import render,redirect,HttpResponse
from app01 import models
import json

import os

def upload(request):
    if request.method == 'GET':
        img_list = models.Img.objects.all()
        return render(request,'upload.html',{'img_list': img_list})
    elif request.method == "POST":
        user = request.POST.get('user')
        fafafa = request.POST.get('fafafa')

        obj = request.FILES.get('fafafa')
        # print(obj.name,obj.size)  #读取文件名称和大小,返回后台
        # print(user,fafafa)
        file_path = os.path.join('static','upload',obj.name)
        f = open(file_path, 'wb')
        for chunk in obj.chunks():
            f.write(chunk)
        f.close()
        models.Img.objects.create(path=file_path)

        ret={'status':True,'path':file_path}
        return HttpResponse(json.dumps(ret))

优点:

  • AJAX使用Javascript技巧向服务器发送异步乞请;
  • AJAX无须刷新整个页面;
  • 因为服务器响应内容不再是任何页面,而是页面中的局部,所以AJAX品质高;

 

# url控制器from django.contrib import adminfrom django.urls import pathfrom app01 import viewsurlpatterns = [ path('admin/', admin.site.urls), path('index/', views.index), path('test_ajax/', views.test_ajax),]

4,文件操作方法

jquery实现的ajax

******************************************************************
jquery中各个事件执行顺序如下:
1.ajaxStart(全局事件)
2.beforeSend
3.ajaxSend(全局事件)
4.success
5.ajaxSuccess(全局事件)
6.error
7.ajaxError (全局事件)
8.complete
9.ajaxComplete(全局事件)
10.ajaxStop(全局事件)
先执行success,再执行error,最后始终执行complete
----------------------
区别的就是 --- 
success:当请求成功时调用函数,即status==200;
complete:当请求完成时调用函数,即status==404、403、302...只要不出错就行。

因为通常我们需要用来清理资源   所以就设计成compelete在success之后执行 

 

 

{% load staticfiles %}

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{% static 'JS/jquery-3.1.1.js' %}"></script>
</head>
<body>

<button class="send_Ajax">send_Ajax</button>

<script>
      //$.ajax的两种使用方式:

      //$.ajax(settings);
      //$.ajax(url,[settings]);


       $(".send_Ajax").click(function(){

           $.ajax({
               url:"/handle_Ajax/",
               type:"POST",
               data:{username:"Yuan",password:123},

               success:function(data){
                   alert(data)
               },

                 //=================== error============

                error: function (jqXHR, textStatus, err) {

                        // jqXHR: jQuery增强的xhr
                        // textStatus: 请求完成状态
                        // err: 底层通过throw抛出的异常对象,值与错误类型有关
                        console.log(arguments);
                    },

                 //=================== complete============

                complete: function (jqXHR, textStatus) {
                    // jqXHR: jQuery增强的xhr
                    // textStatus: 请求完成状态 success | error
                    console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);
                    console.log('textStatus: %s', textStatus);
                },

                //=================== statusCode============
                statusCode: {
                    '403': function (jqXHR, textStatus, err) {
                        console.log(arguments);  //注意:后端模拟errror方式:HttpResponse.status_code=500
                     },

                    '400': function () {
                    }
                }

           })

       })

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

 

那便是说当大家必要有打点的视图函数 index和test_ajax:

obj.read():从文件中读取整个上传的数量,那么些法子只相符小文件;

view:

澳门新葡萄京娱乐网站 14澳门新葡萄京娱乐网站 15

import json,time

def index(request):

    return render(request,"index.html")

def handle_Ajax(request):

    username=request.POST.get("username")
    password=request.POST.get("password")

    print(username,password)
    time.sleep(10)

    return HttpResponse(json.dumps("Error Data!"))

View Code

 

# app01-->views.pyfrom django.shortcuts import render,HttpResponse# Create your views here.def index: return render(request, 'index.html')def test_ajax: return HttpResponse

obj.chunks():按块再次回到文件,通过在for循环中实行迭代,能够将大文件按块写入到服务器中;

$.ajax参数

在这里地十二分了对应的视图然后回到了一个html页面:

obj.multiple_chunks():那个艺术依照myFile的大大小小,重临True或然False,当myFile文件大于2.5M(默以为2.5M,能够调动卡塔尔(英语:State of Qatar)时,该办法再次回到True,不然再次来到False,因而能够依据该措施来抉择选拔read方法读取照旧采用chunks方法

倡议参数

 

######################------------data---------################

       data: 当前ajax请求要携带的数据,是一个json的object对象,ajax方法就会默认地把它编码成某种格式
             (urlencoded:?a=1&b=2)发送给服务端;此外,ajax默认以get方式发送请求。

             function testData() {
               $.ajax("/test",{     //此时的data是一个json形式的对象
                  data:{
                    a:1,
                    b:2
                  }
               });                   //?a=1&b=2
######################------------processData---------################

processData:声明当前的data数据是否进行转码或预处理,默认为true,即预处理;if为false,
             那么对data:{a:1,b:2}会调用json对象的toString()方法,即{a:1,b:2}.toString()
             ,最后得到一个[object,Object]形式的结果。

######################------------contentType---------################

contentType:默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
             用来指明当前请求的数据编码格式;urlencoded:?a=1&b=2;如果想以其他方式提交数据,
             比如contentType:"application/json",即向服务器发送一个json字符串:

               $.ajax("/ajax_get",{
            type:"POST",     
                 headers:{"X-CSRFToken":$.cookie('csrftoken')},   //用json格式发送时,不能把这个放在data中发送,格式会变化,不能识别
                  data:JSON.stringify({     //用了json格式发送时,必须先用这个转换一下才行
                       a:22,
                       b:33
                   }),
                   contentType:"application/json",


               });                          //{a: 22, b: 33}

             注意:contentType:"application/json"一旦设定,data必须是json字符串,不能是json对象


######################------------traditional---------################

traditional:一般是我们的data数据有数组时会用到 :data:{a:22,b:33,c:["x","y"]},
              traditional为false会对数据进行深层次迭代;  

 

# index.html Title  功能1:发送ajax请求  //这里的内容是空的 ajax  $.click{ $.ajax({ url:'/test_ajax/', type:'get', success:function.html 

obj.name:那是贰个本性,不是艺术,该属性获得上传的文本名,包括后缀,如123.exe;

响应参数

 

/*

dataType:  预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后,传递给回调函数。
            默认不需要显性指定这个属性,ajax会根据服务器返回的content Type来进行转换;
            比如我们的服务器响应的content Type为json格式,这时ajax方法就会对响应的内容
            进行一个json格式的转换,if转换成功,我们在success的回调函数里就会得到一个json格式
            的对象;转换失败就会触发error这个回调函数。如果我们明确地指定目标类型,就可以使用
            data Type。
            dataType的可用值:html|xml|json|text|script
            见下dataType实例
        即写了发送时指定了dataType类型,views中的响应结果返回时,不需要我们自己转化格式
*/

 

示例:

澳门新葡萄京娱乐网站 16澳门新葡萄京娱乐网站 17

from django.shortcuts import render,HttpResponse
from django.views.decorators.csrf import csrf_exempt
# Create your views here.

import json

def login(request):

    return render(request,'Ajax.html')


def ajax_get(request):

    l=['alex','little alex']
    dic={"name":"alex","pwd":123}

    #return HttpResponse(l)      #元素直接转成字符串alexlittle alex
    #return HttpResponse(dic)    #字典的键直接转成字符串namepwd
    return HttpResponse(json.dumps(l))
    return HttpResponse(json.dumps(dic))# 传到前端的是json字符串,要想使用,需要JSON.parse(data)

//---------------------------------------------------
    function testData() {

        $.ajax('ajax_get', {
           success: function (data) {
           console.log(data);
           console.log(typeof(data));
           //console.log(data.name);
           //JSON.parse(data);
           //console.log(data.name);
                                     },
           //dataType:"json",
                            }
                       )}

注解:Response Headers的content Type为text/html,所以返回的是String;但如果我们想要一个json对象
    设定dataType:"json"即可,相当于告诉ajax方法把服务器返回的数据转成json对象发送到前端.结果为object
    当然,
        return HttpResponse(json.dumps(a),content_type="application/json")

    这样就不需要设定dataType:"json"了。
    content_type="application/json"和content_type="json"是一样的!

View Code

那句话的情致是,当大家点击button开关的时候,触发了点击动作,然后发送了一个ajax央求,让我们先看看那个时候是怎么着体统的:

obj.size:那也是三个属性,该属性得到上传文件的大大小小。

csrf跨站哀告杜撰

当大家点击了开关的时候,就发送了三个ajax须要:

5.1 form 上传

方式1

?

1
2
3
$.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});

此格局的局限性在于风流倜傥旦js文件单独写到其余文件里,被引用的话,加载时{{csrf_token}}不会被渲染,不会一蹴而就

那儿多少个简易的ajax央求就发送达成了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form method="POST" action="/upload.html" enctype="multipart/form-data">
        <input type="text" name="user" />
        <input type="file" name="fafafa" />
        <input type="submit" value="提交" />
    </form>

    <div>
        {% for item in img_list %}
            <img style="height: 200px;width: 200px;" src="/{{ item.path }}" />
        {% endfor %}
    </div>


</body>
</html>

方式2

?

1
2
3
<form>
{% csrf_token %}
</form><br><br><br>$.ajax({<br>...<br>data:{
"csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val();

?

1
}<br>})

应用ajax完结计算器

 

方式3:

?

1
<script src="{% static 'js/jquery.cookie.js' %}"></script>

?

1
2
3
4
5
$.ajax({
 
headers:{"X-CSRFToken":$.cookie('csrftoken')},
 
})

 

ajax发送json类型的多少时,跨域假造要选择此措施,因为生机勃勃旦使用方法二时,data中的格式会发生变化,不能够识别格式化后的数量,POST恳求则被明确命令禁止

 

先是大家的index.html中张开布局:

5.2 原生的ajax Http乞请上传文件措施

JS实现的ajax

# index.html功能2:利用ajax实现的计算器 +=计算 $.click{ $.ajax({ url:'/cal/', type:'post', data:{ 'n1':$, 'n2':$, }, success:function{ console.log.val

涉及到几个指标FormData和XMLHttpRequest

AJAX**核心(XMLHttpRequest)**

      其实AJAX就是在Javascript中多加多了二个对象:XMLHttpRequest对象。全数的异步交互作用都以应用XMLHttpServlet对象完毕的。也正是说,我们只须要学习多少个Javascript的新对象就可以。

?

1
var xmlHttp = new XMLHttpRequest();(大多数浏览器都支持DOM2规范)

细心,种种浏览器对XMLHttpRequest的支撑也是例外的!为了管理浏览器宽容难点,给出上边方法来成立XMLHttpRequest对象:

澳门新葡萄京娱乐网站 18澳门新葡萄京娱乐网站 19

function createXMLHttpRequest() {
        var xmlHttp;
        // 适用于大多数浏览器,以及IE7和IE更高版本
        try{
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            // 适用于IE6
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                // 适用于IE5.5,以及IE更早版本
                try{
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){}
            }
        }            
        return xmlHttp;
    }

View Code

接下来大家获得了n1和n2的值,通过诉求url发送给相应的视图然后进行数量管理,最终获得结果再回来给那么些ajax。

利用FormData对象,大家能够由此JavaScript用有个别键值对来模拟风度翩翩三种表单控件,大家还是能运用XMLHttpRequest的send(卡塔尔(英语:State of Qatar)方法来异步的交由那些"表单".比起家常的ajax,使用FormData的最大亮点正是大家得以异步上传一个二进制文件.

采纳流程

# views.pydef cal: print n1 = int(request.POST.get n2 = int(request.POST.get sum = n1+n2 return HttpResponse

XMLHttpRequest 是二个API, 它为顾客端提供了在顾客端和服务器之间传输数据的遵守。它提供了一个经过 UCRUISERL 来获取数据的简约方法,并且不会使全部页面刷新。那使得网页只更新生龙活虎部分页面而不会侵扰到客商。XMLHttpRequest 在 AJAX 中被多量行使。

步骤1:  张开与服务器的接连(**open**方法)

当获得XMLHttpRequest对象后,就能够调用该对象的open(卡塔尔(قطر‎方法展开与服务器的连年了。open(卡塔尔(قطر‎方法的参数如下:

open(method, url, async):

  • method:诉求格局,平时为GET或POST;
  • url:央求的服务器地址,举例:/ajaxdemo1/AServlet,若为GET央浼,还足以在U传祺L后扩大参数;
  • async:那些参数能够不给,暗许值为true,表示异步必要;

?

1
2
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "/ajax_get/?a=1", true); 

那时候的url调整器必要新增增加一条:

XMLHttpRequest 是二个 JavaScript 对象,它最早由微软企划,随后被 Mozilla、Apple 和 Google接受. 近期,该目的已经被 W3C协会规范化. 通过它,你能够相当轻易的取回二个UCRUISERL上的财富数据. 尽管名字里有XML, 但 XMLHttpRequest 能够取回全数品种的数额财富,并不囿于于XML。 何况除了HTTP ,它还援救file 和 ftp 合同.

步骤2:  发送央浼

当使用open张开连接后,就足以调用XMLHttpRequest对象的send(卡塔尔(英语:State of Qatar)方法发送须求了。send(卡塔尔方法的参数为POST伏乞参数,即对应HTTP公约的央求体内容,假诺GET要求,供给在USportageL后连连参数。

注意:若未有参数,供给给出null为参数!若不给出null为参数,大概会促成Fire福克斯浏览器不可能经常发送央求!

?

1
xmlHttp.send(null);

POST恳求的多寡也要写的跟get央求相符

<script>
 var ele_btn=document.getElementsByTagName('button')[0];
  ele_btn.onclick=function () {
      var xmlHttp = new XMLHttpRequest();
      var n1=document.getElementsByClassName('n1')[0].value;
      var n2=document.getElementsByClassName('n2')[0].value;
      var n3=document.getElementsByClassName('n3')[0];
      var c=document.getElementsByName('csrfmiddlewaretoken')[0].value;
      xmlHttp.open('POST','/send_ajax/');
      xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xmlHttp.send('n1='+n1+'&n2='+n2+'&csrfmiddlewaretoken='+c);  //跨域伪造拼接时名字必须是csrfmiddlewaretoken,否则失效

       xmlHttp.onreadystatechange = function() { 

    if(xmlHttp.readyState == 4 && xmlHttp.status == 200) 
      { n3.value=xmlHttp.responseText; } 
    }; }
 </script>

 

path,

语法var myRequest = new XMLHttpRequest();

步骤3:  选择服务器响应

当呼吁发送出去后,服务器端就起来实践了,但劳务器端的响应还并未有收到到。接下来大家来采用服务器的响应。

XMLHttpRequest对象有三个onreadystatechange事件,它会在XMLHttpRequest对象的气象发生变化时被调用。上边介绍一下XMLHttpRequest对象的5种情状:

  • 0:初步化未成功处境,只是创造了XMLHttpRequest对象,还未有调用open(卡塔尔方法;
  • 1:央浼已开头,open(卡塔尔(英语:State of Qatar)方法已调用,但还未有调用send(卡塔尔(قطر‎方法;
  • 2:央求发送达成景况,send(卡塔尔方法已调用;
  • 3:初叶读取服务器响应;
  • 4:读取服务器响应结束。 

onreadystatechange事件会在景况为1、2、3、4时吸引。

  上面代码会被实行四回!对应XMLHttpRequest的多样情景!

xmlHttp.onreadystatechange = function() {
            alert('hello');
        };

但平常大家只关切最后黄金时代种情景,即读取服务器响应甘休时,客户端才会做出改换。我们得以透过XMLHttpRequest对象的readyState属性来获得XMLHttpRequest对象的意况。

xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4) {
                alert('hello');    
            }
        };

事实上大家还要保护服务器响应的状态码是不是为200,其服务器响应该为404,或500,那么就象征哀告失败了。大家得以经过XMLHttpRequest对象的status属性获得服务器的状态码。

终极,大家还须求取拿到服务器响应的内容,能够因而XMLHttpRequest对象的responseText拿到服务器响应内容。

xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                alert(xmlHttp.responseText);    
            }
        };

附带是安顿文件settings中的这生机勃勃行必要注释掉:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container img{
            width:200px;
            height:200px;
        }
    </style>
</head>
<body>
    <div class="container">
        {% for img in img_list %}
            <img src="/{{ img.path }}">
        {% endfor %}
    </div>
    <input type="file" id="imgs" />
    <input type="button" value="提交" onclick="UploadXML()" />
    <script>
        function UploadXML() {
            var dic = new FormData();
            dic.append('user', 'v1');//append() 给当前FormData对象添加一个键/值对,name字段名称.value字段值.可以是,或者一个字符串,如果全都不是,则该值会被自动转换成字符串.
            dic.append('fafafa', document.getElementById('imgs').files[0]);
            console.log(dic);
            var xml = new XMLHttpRequest();
            xml.open('post', '/upload.html', true);
            xml.onreadystatechange = function () {
                if(xml.readyState == 4){
                    var obj = JSON.parse(xml.responseText);
                    if(obj.status){
                        var img = document.createElement('img');
                        img.src = "/" + obj.path;
                        document.getElementById("imgs").appendChild(img);
                    }
                }
            };
            xml.send(dic);//发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回.
        }
    </script>
</body>
</html>

 if 发送POST请求

<1>必要设置央求头:xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”卡塔尔(英语:State of Qatar);注意 :form表单会默许这几个键值对不设定,Web服务器会忽略乞求体的内容。

<2>在出殡和安葬时得以内定央求体了:xmlHttp.send(“username=yuan&password=123”卡塔尔

# 'django.middleware.csrf.CsrfViewMiddleware',

5.4 jQuery Ajax上传,同期接纳了iframe,一下代码包涵了二种艺术。即:

JS实现ajax小结

 

/*
    创建XMLHttpRequest对象;
    调用open()方法打开与服务器的连接;
    调用send()方法发送请求;
    为XMLHttpRequest对象指定onreadystatechange事件函数,这个函数会在

    XMLHttpRequest的1、2、3、4,四种状态时被调用;

    XMLHttpRequest对象的5种状态,通常我们只关心4状态。

    XMLHttpRequest对象的status属性表示服务器状态码,它只有在readyState为4时才能获取到。

    XMLHttpRequest对象的responseText属性表示服务器响应内容,它只有在
    readyState为4时才能获取到!

*/

 

测试代码:

澳门新葡萄京娱乐网站 20澳门新葡萄京娱乐网站 21

<h1>AJAX</h1>
<button onclick="send()">测试</button>
<div id="div1"></div>


<script>
       function createXMLHttpRequest() {
            try {
                return new XMLHttpRequest();//大多数浏览器
            } catch (e) {
                try {
                    return new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    return new ActiveXObject("Microsoft.XMLHTTP");
                }
            }
        }

        function send() {
            var xmlHttp = createXMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    var div = document.getElementById("div1");
                    div.innerText = xmlHttp.responseText;
                    div.textContent = xmlHttp.responseText;
                }
            };

            xmlHttp.open("POST", "/ajax_post/", true);
            //post: xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlHttp.send(null);  //post: xmlHttp.send("b=B");
        }


</script>

#--------------------------------views.py 
from django.views.decorators.csrf import csrf_exempt

def login(request):
    print('hello ajax')
    return render(request,'index.html')

@csrf_exempt   #csrf防御
def ajax_post(request):
    print('ok')
    return HttpResponse('helloyuanhao') 

View Code

动用ajax完毕登录认证

1-利用JQuery Ajax + FormData举行理文件件上传
2-基于Iframe完毕伪Ajax 上传文件

实例(客商名是还是不是已被登记)

首先我们要开多个路由,当客商在浏览器输入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container img{
            width: 200px;
            height: 200px;
        }
    </style>
    <script>
        function li(arg) {
            console.log(arg);
        }
    </script>
</head>
<body>
    <h1>测试Iframe功能</h1>
    <input type="text" id="url" />
    <input type="button" value="点我" onclick="iframeChange();" />
    <iframe  id="ifr" src=""></iframe>
    <hr/>
    <h1>基于iframe实现form提交</h1>
    <form action="/upload.html" method="post" target="iframe_1" enctype="multipart/form-data">
        <iframe style="display: none"  id="iframe_1" name="iframe_1" src="" onload="loadIframe();"></iframe>
        <input type="text" name="user" />
        <input type="file" name="fafafa" />
        <input type="submit" />
    </form>
    <h1>图片列表</h1>
    <div class="container" id="imgs">
        {% for img in img_list %}
            <img src="/{{ img.path }}">
        {% endfor %}
    </div>    

    <input type="file" id="img" />
    <input type="button" value="提交XML" onclick="UploadXML()" />
    <input type="button" value="提交JQ" onclick="Uploadjq()" />
    <script src="/static/jquery-2.1.4.min.js"></script>
    <script>
        function UploadXML() {
            var dic = new FormData();
            dic.append('user', 'v1');
            dic.append('fafafa', document.getElementById('img').files[0]);
            var xml = new XMLHttpRequest();
            xml.open('post', '/upload.html', true);
            xml.onreadystatechange = function () {
                if(xml.readyState == 4){
                    var obj = JSON.parse(xml.responseText);
                    if(obj.status){
                        var img = document.createElement('img');
                        img.src = "/" + obj.path;
                        document.getElementById("imgs").appendChild(img);
                    }
                }
            };
            xml.send(dic);
        }
        function Uploadjq() {
            var dic = new FormData();
            dic.append('user', 'v1');
            dic.append('fafafa', document.getElementById('img').files[0]);
            $.ajax({
                url: '/upload.html',
                type: 'POST',
                data: dic,
                processData: false,  // tell jQuery not to process the data
                contentType: false,  // tell jQuery not to set contentType
                dataType: 'JSON',
                success: function (arg) {
                    if (arg.status){
                        var img = document.createElement('img');
                        img.src = "/" + arg.path;
                        $('#imgs').append(img);
                    }
                }
            })
        }
        function  iframeChange() {
            var url = $('#url').val();
            $('#ifr').attr('src', url);
        }
        function loadIframe() {
            console.log(1);
            // 获取iframe内部的内容
            var str_json = $('#iframe_1').contents().find('body').text();
            var obj = JSON.parse(str_json);
            if (obj.status){
                var img = document.createElement('img');
                img.src = "/" + obj.path;
                $('#imgs').append(img);
            }
        }
    </script>
</body>
</html>

7.1** 功用介绍**

在登记表单中,当客户填写了顾客名后,把光标移开后,会自行向服务器发送异步央求。服务器重临true或false,重返true表示这么些客户名曾经被注册过,重回false表示从未挂号过。

顾客端得到服务器重回的结果后,明确是否在客商名文本框后显得“顾客名已被注册”的错误新闻!

# url控制器from django.contrib import adminfrom django.urls import pathfrom app01 import viewsurlpatterns = [ path('admin/', admin.site.urls), path('index/', views.index), path('test_ajax/', views.test_ajax), path, path('login/', views.login), path('login_btn/', views.login_btn),]# login_btn函数def login_btn: return render(request, 'login_btn.html')

 

7.2** 案例解析**

  • 页面中付出注册表单;
  • 在username表单字段中增加onblur事件,调用send(卡塔尔方法;
  • send(卡塔尔国方法拿到username表单字段的源委,向服务器发送异步央浼,参数为username;
  • django 的视图函数:获取username参数,决断是还是不是为“yuan”,假诺是响应true,否则响应false

参谋代码:

澳门新葡萄京娱乐网站 22澳门新葡萄京娱乐网站 23

<script type="text/javascript">
        function createXMLHttpRequest() {
            try {
                return new XMLHttpRequest();
            } catch (e) {
                try {
                    return new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    return new ActiveXObject("Microsoft.XMLHTTP");
                }
            }
        }

        function send() {
            var xmlHttp = createXMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    if(xmlHttp.responseText == "true") {
                        document.getElementById("error").innerText = "用户名已被注册!";
                        document.getElementById("error").textContent = "用户名已被注册!";
                    } else {
                        document.getElementById("error").innerText = "";
                        document.getElementById("error").textContent = "";
                    }
                }
            };
            xmlHttp.open("POST", "/ajax_check/", true, "json");
            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            var username = document.getElementById("username").value;
            xmlHttp.send("username=" + username);
        }
</script>

//--------------------------------------------------index.html

<h1>注册</h1>
<form action="" method="post">
用户名:<input id="username" type="text" name="username" onblur="send()"/><br/>
密 码:<input type="text" name="password"/><br/>
<input type="submit" value="注册"/>
</form>


//--------------------------------------------------views.py
from django.views.decorators.csrf import csrf_exempt

def login(request):
    print('hello ajax')
    return render(request,'index.html')
    # return HttpResponse('helloyuanhao')

@csrf_exempt
def ajax_check(request):
    print('ok')

    username=request.POST.get('username',None)
    if username=='yuan':
        return HttpResponse('true')
    return HttpResponse('false')

View Code

 

下一场重返了那几个html页面:

*  *

jQuery.serialize()

serialize()函数用于种类化豆蔻梢头组表单成分,将表单内容编码为用于提交的字符串

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

该函数主要依附用于提交有效表单控件的name和value,将它们拼接为三个可径直用来表单提交的文本字符串,该字符串已通过正规的U悍马H2L编码处理(字符集编码为UTF-8卡塔尔(قطر‎。

该函数不会连串化无需付出的表单控件,这和健康的表单提平安银行为是同样的。比如:不在<form>标签内的表单控件不会被交付、未有name属性的表单控件不会被交给、带有disabled属性的表单控件不会被提交、未有被入选的表单控件不会被交付。

与常规表单提交不一样的是:常规表单一般会提交带有name的按钮控件,而serialize()函数不会序列化带有name的按钮控件。更多详情请点击这里。
 Title  利用ajax实现登陆认证  $.click{ $.ajax({ url:'/login/', type:'post', data:{ 'user':$, 'pwd':$, }, success:function{ //&#27492;&#26102;&#38656;&#35201;&#36827;&#34892;&#36716;&#25442; console.log; var data = JSON.parse console.log; if { location.href = 'http://www.baidu.com' }else{ $.html.css } } }) }) 

 

语法

jQuery 1.0 新扩展该函数。

?

1
jQueryObject.serialize( )

最后ajax将央浼提交到了/login/中,然后开展相称视图,然后就开端实行相应代码:

返回值

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>内的所有表单元素
// 序列化后的结果: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() );

serialize()函数平时用于将表单内容类别化,以便通过AJAX方式提交。

澳门新葡萄京娱乐网站 24;)

$("#btn").click( function(){

    // 将当前表单内容以POST请求的AJAX方式提交到"http://www.365mini.com"
    $.post( "http://www.365mini.com", $("form").serialize(), function( data, textStatus, jqXHR ){
        alert( "AJAX提交成功!" );       
    } );

} );

澳门新葡萄京娱乐网站 25;)

 

def login: # print user = request.POST.get pwd = request.POST.get from .models import User user = User.objects.filter.first() ret = { 'user': None, 'msg': None } if user: ret['user'] = user.user else: ret['msg'] = 'username or password is wrong!' import json return HttpResponse

上传文件

率先展开浏览器,输入错误的顾客名和密码:

form表单上传文件

接下来开头输入准确的客商名和密码,就能够间接跳转到百度的首页了。

html

 

<h3>form表单上传文件</h3>


<form action="/upload_file/" method="post" enctype="multipart/form-data">
    <p><input type="file" name="upload_file_form"></p>
    <input type="submit">
</form>

 

enctype="multipart/form-data"  接收文件的二进制数据,如果不加上这个,request.FILES里取不到数据

动用form表单进行理文件件上传

view

 

def index(request):

    return render(request,"index.html")


def upload_file(request):
    print("FILES:",request.FILES)   #接收文件相关数据  字典格式
#结果 FILES <MultiValueDict: {'avatar': [<InMemoryUploadedFile: day47.sql (application/octet-stream)>]}>

    print("POST:",request.POST)    #接收不到文件相关数据,因为post里处理的是application/x-www-form-urlencoded格式的

#结果 <QueryDict: {'csrfmiddlewaretoken': ['mIJp4p8iPTWLYv7SkfWEKel2Udiuw8r6QFKJ9u23EQcugEaBgfGJPtDioC72f5Qt'], 'user': ['das'], 'avatar': ['day47.sql']}>
    return HttpResponse("上传成功!")

 

 

# urls.pypath('file_put/', views.file_put),# views.py# 文件的上传def file_put: if request.method == 'POST': print return render(request, 'file_put.html')# file_put.html 文件上传 基于form表单实现的文件上传 

Ajax(FormData)

FormData是哪些呢?

 

XMLHttpRequest Level 2增多了叁个新的接口FormData.利用FormData对象,大家能够透过JavaScript用有个别键值对来模拟后生可畏连串表单控件,大家仍可以使用XMLHttpRequest的send()格局来异步的付出那些"表单".比起普通的ajax,使用FormData的最大亮点就是咱们得以异步上传一个二进制文件.

富有主流浏览器的较新本子都已经扶持那么些目的了,比方Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。

那时候大家输入完客商名和当选完图片后,点击提交大家查看下打字与印刷的音讯。

html

 

<h3>Ajax上传文件</h3>

<p><input type="text" name="username" id="username" placeholder="username"></p>
<p><input type="file" name="upload_file_ajax" id="upload_file_ajax"></p>

<button id="upload_button">提交</button>
{#注意button标签不要用在form表单中使用#}

<script>
    $("#upload_button").click(function(){

        var username=$("#username").val();
        var upload_file=$("#upload_file_ajax")[0].files[0];

        var formData=new FormData();
        formData.append("username",username);
        formData.append("upload_file_ajax",upload_file);


        $.ajax({
            url:"/upload_file/",
            type:"POST",
            data:formData,

            contentType:false,  
            processData:false,
       #一定要加上上面这两行,不然会报错

            success:function(){
                alert("上传成功!")
            }
        });


    })
</script>

 

那正是说是大家的图纸并未有上传过来吗?当然不是的,是因为上传的图样就不在此面。让大家在views.py中施行这些代码:

views

澳门新葡萄京娱乐网站 26澳门新葡萄京娱乐网站 27

def index(request):

    return render(request,"index.html")


def upload_file(request):
    print("FILES:",request.FILES)
    print("POST:",request.POST)
    return HttpResponse("上传成功!")

View Code

 

print

假造Ajax上传文件

那就是说当时我们就能够规定,那么些文件是上传过来了,寄存在request.FILES中,那么我们使用request.FILES.get就可以把这一个图形对象得到了。

iframe标签

<iframe> 标签规定八个内联框架。

一个内联框架被用来在日前 HTML 文书档案中放到另叁个文书档案。

示例:

?

1
<iframe src="http://www.baidu.com" width="1000px" height="600px"></iframe>
# views.py def file_put: if request.method == 'POST': print # # print print # 图片信息 # 将文件给取出来 img_obj = request.FILES.get with open as f: for line in img_obj: f.write return HttpResponse return render(request, 'file_put.html')

iframe+form

 

<h3>伪造Ajax上传文件</h3>
<form action="/upload_file/" method="post" id="form2" target="ifr" enctype="multipart/form-data">
    <p>
        <iframe name="ifr" id="ifr"></iframe></p>
    <p><input type="file" name="upload_file"></p>
    <p><input type="text" name="user"></p>

    <input type="button" value="提交" id="submitBtn">
</form>

<script>



    $("#submitBtn").click(function(){

        $("#ifr").load(iframeLoaded);
        $("#form2").submit();


    });

    function iframeLoaded(){
        alert(123)
    }

</script>

 

views

澳门新葡萄京娱乐网站 28澳门新葡萄京娱乐网站 29

def index(request):

    return render(request,"index.html")

def upload_file(request):
    print("FILES:",request.FILES)
    print("POST:",request.POST)
    return HttpResponse("上传成功!")

View Code

 

 

那么此时径直上传的话,那么就能够在时下项目下显得那张照片。

同源战略与Jsonp

利用ajax完结文件上传

同源战术

同源战术(萨姆e origin policy)是风度翩翩种约定,它是浏览器最基本也最基本的景德镇作用,如若相当不足了同源攻略,则浏览器的健康职能或者都会受到震慑。能够说Web是构建在同源攻略根基之上的,浏览器只是针对同源战术的后生可畏种实现。

同源战术,它是由Netscape提出的二个名牌的安全计谋。以后具有辅助JavaScript 的浏览器都会利用这几个陈设。所谓同源是指,域名,左券,端口相仿。当一个浏览器的多少个tab页中分头张开来 百度和Google的页面当浏览器的百度tab页执行贰个本子的时候会检查那个脚本是归属哪个页面的,即检查是或不是同源,独有和百度同源的台本才会被试行。若是非同源,那么在伸手数据时,浏览器会在调节新北报两个非常,提醒屏绝访谈。

 

首先我们需求新开八个url或然将事前的疏解掉:

示例:

项目1:

澳门新葡萄京娱乐网站 30澳门新葡萄京娱乐网站 31

==================================http://127.0.0.1:8001项目的index
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>


<button>ajax</button>
{% csrf_token %}

<script>
    $("button").click(function(){


        $.ajax({
            url:"http://127.0.0.1:7766/SendAjax/",
            type:"POST",
            data:{"username":"yuan","csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()},
            success:function(data){
                alert(123);
                alert(data)
            }
        })
    })
</script>
</body>
</html>


==================================http://127.0.0.1:8001项目的views

def index(request):


    return render(request,"index.html")


def ajax(request):
    import json
    print(request.POST,"+++++++++++")
    return HttpResponse(json.dumps("hello"))

View Code

项目2:

澳门新葡萄京娱乐网站 32澳门新葡萄京娱乐网站 33

==================================http://127.0.0.1:8002项目的index
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>


<button>sendAjax</button>

{% csrf_token %}

<script>
    $("button").click(function(){


        $.ajax({
            url:"/SendAjax/",
            type:"POST",
            data:{"username":"yuan","csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()},
            success:function(data){
                alert(data)
            }
        })
    })
</script>

</body>
</html>


==================================http://127.0.0.1:8002项目的views

def index(request):

    return render(request,"index.html")

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt


def SendAjax(request):

    import json

    print("++++++++")

    return HttpResponse(json.dumps("hello2"))

View Code

 当点击项目1的开关时,发送了央浼,然而会开掘报错如下:

已拦截跨源请求:同源策略禁止读取位于 http://127.0.0.1:7766/SendAjax/ 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。

唯独注意,项目第22中学的访谈已经发出了,表明是浏览器对非同源乞请重回的结果做了掣肘。

# urls.pypath('file_put/', views.file_put),

Jsonp

jsonp是json用来跨域的多少个事物。原理是因而script标签的跨域天性来绕过同源战术。

构思:那算怎么回事?

?

1
<script src="http://code.jquery.com/jquery-latest.js"></script>

 依据script标签,实现跨域诉求,示例:

 

# =============================http://127.0.0.1:8001/index


<button>ajax</button>
{% csrf_token %}

<script>
    function func(name){
        alert(name)
    }
</script>

<script src="http://127.0.0.1:7766/SendAjax/"></script>


# =============================http://127.0.0.1:8002/
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt


def SendAjax(request):

    import json

    print("++++++++")
    # dic={"k1":"v1"}
    return HttpResponse("func('yuan')")  # return HttpResponse("func('%s')"%json.dumps(dic))

 

那其实正是JSONP的简短实现情势,可能说是JSONP的原型:创制叁个回调函数,然后在中间隔服务上调用那个函数並且将JSON 数据格局作为参数字传送递,达成回调。

将JSON数据填充进回调函数,那就是JSONP的JSON+Padding的意思。

      平时景色下,大家期望以此script标签能够动态的调用,并非像下边因为固定在html里面所以没等页面显示就试行了,非常不利索。我们能够通过javascript动态的创办script标签,那样咱们就足以灵活调用远程服务了。

 

<button onclick="f()">sendAjax</button>

<script>
    function addScriptTag(src){
         var script = document.createElement('script');
         script.setAttribute("type","text/javascript");
         script.src = src;
         document.body.appendChild(script);
         document.body.removeChild(script);
    }


    function func(name){
        alert("hello"+name)
    }

    function f(){
         addScriptTag("http://127.0.0.1:7766/SendAjax/")
    }
</script>

 

为了进一层灵敏,今后将你和煦在客户端定义的回调函数的函数名传送给服务端,服务端则会回来以你定义的回调函数名的法子,将获取的json数据传入这么些情势成功回调:

将8001的f()改写为:

?

1
2
3
function f(){
         addScriptTag("http://127.0.0.1:7766/SendAjax/?callbacks=func")
    }

8002的views改为:

?

1
2
3
4
5
6
7
8
9
10
def SendAjax(request):
 
    import json
 
    dic={"k1":"v1"}
 
    print("callbacks:",request.GET.get("callbacks"))
    callbacks=request.GET.get("callbacks")   #拿到前端传来的回调函数的名字
 
    return HttpResponse("%s('%s')"%(callbacks,json.dumps(dic)))  #拼接成:指定函数名(我们给前端页面的数据)返回给前端页面,在前端页面执行函数

ajax提交文件的章程相通运用form表单,可是没有必要给input设置name属性,只必要设置class或许id就足以了:

jQuery对JSONP的实现

# file_put.html 

getJSON

jQuery框架也理之当然协助JSONP,可以应用$.getJSON(url,[data],[callback])方法

8001的html改为:

 

<button onclick="f()">sendAjax</button>

<script>

    function f(){
          $.getJSON("http://127.0.0.1:7766/SendAjax/?callbacks=?",function(arg){
            alert("hello"+arg)
        });
    }

</script>

 

8002的views不改动。

结果是同样的,要留心的是在url的末尾总得增多一个callback参数,那样getJSON方法才会知道是用JSONP方式去访问服务,callback后边的极其问号是中间自动生成的一个回调函数名。

      其余,假使说我们想内定自身的回调函数名,恐怕说服务上明确了定位回调函数名该怎么做呢?大家能够使用$.ajax方法来完结

那么大家必要给btn设置点击click动作:

 $.ajax

8001的html改为:

 

<script>

    function f(){
          $.ajax({
                url:"http://127.0.0.1:7766/SendAjax/",
                dataType:"jsonp",
                jsonp: 'callbacks',
                jsonpCallback:"SayHi"   //指定回调函数的名字
           });

       }

    function SayHi(arg){
                alert(arg);
            }

</script>

 

8002的views不改动。

本来,最轻易易行的方式仍旧经过回调函数来拍卖:

 

<script>

    function f(){

            $.ajax({
               url:"http://127.0.0.1:7766/SendAjax/",
               dataType:"jsonp",            //必须有,告诉server,这次访问要的是一个jsonp的结果。
               jsonp: 'callbacks',          //jQuery帮助随机生成的:callbacks="wner"
               success:function(data){
                   alert("hi "+data)
              }
         });

       }

</script>

 

  jsonp: 'callbacks'正是概念三个寄存回调函数的键,jsonpCallback是前面一个定义好的回调函数方法名'SayHi',server端选择callback键对应值后就可以在里头填充数据打包再次回到了; 

jsonpCallback参数能够不定义,jquery会自动定义二个私自名发过去,那前端就得用回调函数来管理相应数据了。利用jQuery能够极低价的得以完成JSONP来进展跨域访谈。  

注意 JSONP一定是GET请求

$.click{ //涉及到文件上传 需要创建formdata对象 var formdata = new FormData(); formdata.append.val; formdata.append[0].files[0]); $.ajax({ url:'', type:'post', contentType:false, // 交给FormData处理编码 processData:false, //对数据是否进行预处理 如果不做预处理的话 就不做任何编码了 data:formdata, success:function{ console.log

 应用

<input type="button" onclick="AjaxRequest()" value="跨域Ajax" />


<div id="container"></div>


    <script type="text/javascript">
        function AjaxRequest() {
            $.ajax({
                url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403',
                type: 'GET',
                dataType: 'jsonp',
                jsonp: 'callback',
                jsonpCallback: 'list',     //指定传过去的函数名
                success: function (data) {

                    $.each(data.data,function(i){
                        var item = data.data[i];
                        var str = "<p>"+ item.week +"</p>";
                        $('#container').append(str);
                        $.each(item.list,function(j){
                            var temp = "<a href='" + item.list[j].link +"'>" + item.list[j].name +" </a><br/>";
                            $('#container').append(temp);
                        });
                        $('#container').append("<hr/>");
                    })

                }
            });
        }
</script>

 

 

末尾在计划函数中展开文件保留操作:

def file_put: if request.method == "POST": print # 请求报文中的请求体 json print # if contentType==urlencoded ,request.POST才有数据 print('FILES', request.FILES) file_obj=request.FILES.get with open as f: for line in file_obj: f.write return HttpResponse return render(request, "file_put.html")Content-Type

在大家刚刚的form表单的文件上传和ajax文件上传的时候,都关涉到四个央浼头的东西,那么些事物是怎么吧?这么些事物决定着服务器会安分守己哪个种类编码格式给你解码,当你暗许不写的时候,当时的央求头是:application/x-www-form-urlencoded,当您想发送文书类的事物,当时的央求头应该是:form-data......

当服务器收到顾客端发送过来的倡议时,首先就能够去查看诉求头,判别你的央求头是何等,然后开展解码。

让大家分别看下那多少个诉求头:

x-www-form-urlencoded

application/x-www-form-urlencoded:表单数据编码为键值对,&分隔,能够算作我们的GET恳求中?后边的数量,让大家发送二个庶差相当少看看:

那正是说我们须求叁个视图函数还展开始拍戏卖:

def file_put: if request.method == "POST": print # 请求报文中的请求体 json print # if contentType==urlencoded ,request.POST才有数据 return HttpResponse return render(request, "file_put.html")

当大家在浏览器输入admin和123的时候,让我们来看下打字与印刷的结果是如何:

笔者们恰巧说过,当我们乞求头什么都不写的话,那么就是暗许的x-www-form-urlencoded,当央浼头是这种的话,那个时候我们打字与印刷request.POST是有值的,也就那风度翩翩种央求形式request.POST才有值。

让我们明天殡葬一个json的数据

 Title  $.click{ $.ajax({ url:'', type:'post', data:JSON.stringify, success:function{ console.log

def send_json: if request.method == 'POST': print print print('files', request.FILES) return HttpResponse return render(request, 'send_json.html')

当大家发送数据的时候,通过解码收到的便是那样的数额:

就和我们正好说的同等,当央求头是x-www-form-urlencoded的时候,request.POST才会有多少,其余的就从来不。

总结

以上所述是作者给我们介绍的django中的ajax组件教程安详严整,希望对大家有所协理,若是我们有其余疑问请给自身留言,作者会及时回复我们的。在那也特别感激我们对台本之家网址的支撑!

本文由澳门新葡萄京娱乐网站发布于编程知识,转载请注明出处:django中的ajax组件教程精解_php实例_脚本之家,D

关键词: