Ajax 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="/static/jquery-3.4.1/jquery-3.4.1.js"></script>
 7     <style>
 8         .btn{
 9             display: inline-block;
10             padding: 5px 10px;
11             background-color: brown;
12             color: aliceblue;
13 
14         }
15     </style>
16 </head>
17 <body>
18 <div>
19    <h3>4、通过formdata和ajax上传文件</h3>
20     <input type="file" id="img">
21     <h4>a、formdata+jquery ajax测试</h4>
22     <a class="btn" onclick="Ajaxsubmit6()">提交</a>
23     <h4>a、formdata+xmlhttprequest测试</h4>
24     <a class="btn" onclick="Ajaxsubmit7()">提交</a>
25 </div>
26 <script>
27     ///ajax上传文件：
28     //a、通过formdata和ajax发送请求
29     function Ajaxsubmit6 (){
30         file_obj=document.getElementById("img").files[0]
31         var data = new FormData()
32          data.append("k1","k2")
33          data.append("k3",file_obj)
34         $.ajax({
35             url:'/ajax1.html',
36             type:'POST',
37             data:data,
38             success:function (arg) {
39                 console.log(arg)
40             },
41             processData:false,  //通过formdata上传的时候需要自己写请求头
42             contentType:false,
43         })
44     }
45     function Ajaxsubmit7() {
46         /*通过 new 方法XMLHttpRequest对象实例*/
47         var data = new FormData()
48          data.append("k1","k2")
49         var xhr = new XMLHttpRequest();
50         /*open表示以什么方式创建连接*/
51         xhr.open('POST','/ajax1.html')
52         /*回调函数需要写在send前
53         * 详细：
54           0-未初始化，尚未调用open()方法；
55           1-启动，调用了open()方法，未调用send()方法；
56           2-发送，已经调用了send()方法，未接收到响应；
57           3-接收，已经接收到部分响应数据；
58           4-完成，已经接收到全部响应数据；*/
59         xhr.onreadystatechange=function(){
60             if (xhr.readyState == 4){
61                 console.log(xhr.responseText)
62             }
63         }
64         /*get方式没有send的数据，如果需要加数据需要在url后面直接写上*/
65         xhr.send(data);
66 
67 
68     }
69     
70     }
71 </script>
72 
73 <script>
74 
75 </script>
76 </body>
77 </html>

 

一、Ajax概述

对于WEB应用程序：用户使用浏览器发送请求，然后服务器返回结果，往往返回的是字符串（HTML），浏览器将字符串（HTML）渲染并显示在浏览器上。

1、传统的Web应用：每一个简单的操作都需要重新加载全局数据；

2、AJAX（Asynchronous JavaScript and XML (异步的JavaScript和XML)，一种创建交互式网页应用的网页开发技术方案）

异步的javascript：使用JavaScript语言以及相关的浏览器提供类库的功能向服务端发送请求，当服务端处理完请求之后，自动执行某个JavaScript的回调函数。　　

　　　　以上的请求和响应的整个过程是偷偷进行的，页面上无任务感知：URL不会刷新；

XML：XML是一种标记语言，是AJAX在和后台交互时传输数据的格式之一

利用AJAX可以做：

  • 注册时，输入用户名自动检测用户是否已经存在；
  • 登录时，提示用户名密码错误；
  • 删除数据时，将行ID发送到后台，在后台数据库中删除，数据库删除成功后，在页面DOM中将数据行业删除

二、AJAX

1、JQuery AJAX

2、原生XMLHttprequest对象完成AJAX请求

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <script src="/static/jquery-3.4.1/jquery-3.4.1.js"></script>
  7     <style>
  8         .btn{
  9             display: inline-block;
 10             padding: 5px 10px;
 11             background-color: brown;
 12             color: aliceblue;
 13 
 14         }
 15     </style>
 16 </head>
 17 <body>
 18 <h1>Ajax全套</h1>
 19 <h3>jQuery Ajax___get</h3>
 20 <div>
 21     <a  class="btn" onclick="Ajaxsubmit1()">Ajaxsubmit1_get</a>
 22     <a  class="btn" onclick="Ajaxsubmit2()">Ajaxsubmit2_get</a>
 23 
 24 </div>
 25 <h3>jQuery Ajax___post</h3>
 26 <div>
 27     <a  class="btn" onclick="Ajaxsubmit3()">Ajaxsubmit3_post</a>
 28     <a  class="btn" onclick="Ajaxsubmit4()">Ajaxsubmit4_post</a>
 29 
 30 </div>
 31 <script>
 32     /*基于jquery ajax（普通的ajax）*/
 33     function Ajaxsubmit1 (){
 34         $.ajax({
 35             url:'/ajax1.html',
 36             type:'GET',
 37             data:{'p':123},
 38             success:function (arg) {
 39                 {#console.log("请求成功")#}
 40             }
 41 
 42         })
 43     }
 44     /* 不依赖jquery，使用原生的xmlhttprequest对象*/
 45     function Ajaxsubmit2() {
 46         /*通过 new 方法XMLHttpRequest对象实例*/
 47         var xhr = new XMLHttpRequest();
 48         /*open表示以什么方式创建连接*/
 49         xhr.open('GET','/ajax1.html')
 50         /*回调函数需要写在send前
 51         * 详细：
 52           0-未初始化，尚未调用open()方法；
 53           1-启动，调用了open()方法，未调用send()方法；
 54           2-发送，已经调用了send()方法，未接收到响应；
 55           3-接收，已经接收到部分响应数据；
 56           4-完成，已经接收到全部响应数据；*/
 57         xhr.onreadystatechange=function(){
 58             if (xhr.readyState == 4){
 59                 console.log(xhr.responseText)
 60             }
 61         }
 62         /*get方式没有send的数据，如果需要加数据需要在url后面直接写上*/
 63         xhr.send(null);
 64 
 65 
 66     }
 67     /*这是post
 68     * jquery AJAX的post*/
 69     function Ajaxsubmit3 (){
 70         $.ajax({
 71             url:'/ajax1.html',
 72             type:'POST',
 73             data:{'p':123},
 74             success:function (arg) {
 75                 {#console.log("请求成功")#}
 76             }
 77 
 78         })
 79     }
 80     /* 不依赖jquery，使用原生的xmlhttprequest对象的post*/
 81     function Ajaxsubmit4() {
 82         /*通过 new 方法XMLHttpRequest对象实例*/
 83         var xhr = new XMLHttpRequest();
 84         /*open表示以什么方式创建连接*/
 85         xhr.open('POST','/ajax1.html')
 86         /*回调函数需要写在send前
 87         * 详细：
 88           0-未初始化，尚未调用open()方法；
 89           1-启动，调用了open()方法，未调用send()方法；
 90           2-发送，已经调用了send()方法，未接收到响应；
 91           3-接收，已经接收到部分响应数据；
 92           4-完成，已经接收到全部响应数据；*/
 93         xhr.onreadystatechange=function(){
 94             if (xhr.readyState == 4){
 95                 console.log(xhr.responseText)
 96             }
 97         }
 98         /*get方式没有send的数据，如果需要加数据需要在url后面直接写上*/
 99         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8')
100         xhr.send("p=456");
101 
102 
103     }
104    
105 <script>
106 
107 </script>
108 </body>
109 </html>
html

 

 1 from django.shortcuts import render,HttpResponse
 2 import json,os,uuid
 3 from django.views.decorators.clickjacking import xframe_options_exempt, xframe_options_sameorigin, xframe_options_deny
 4 # Create your views here.
 5 def index(request):
 6     return render(request,'index.html')
 7 def ajax(request):
 8     return  HttpResponse("这是ajax的返回数据")
 9 """
10 在使用iframe+form构造伪Ajax的时候，出现Refused to display 'http://127.0.0.1:9000/ajax1.html' in a frame 
11 because it set 'X-Frame-Options' to deny的报错：
12 通过查询得知：https://www.liangzl.com/get-article-detail-158781.html需在相关的接口上添加装饰器即可"""
13 @xframe_options_exempt
14 def ajax1(request):
15     print(request.POST)
16     print(request.GET)
17     print(request.FILES)
18     ret = {"code":0,"message":"response success"}
19     return  HttpResponse(json.dumps(ret))
view.py

 

3、伪AJAX：Iframe+Form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.4.1/jquery-3.4.1.js"></script>
    <style>
        .btn{
            display: inline-block;
            padding: 5px 10px;
            background-color: brown;
            color: aliceblue;

        }
    </style>
</head>
<body>
<script>
    function Ajaxsubmit5() {
        //在提交之前绑定事件
        document.getElementById("iframe").onload=reloadiframe
        document.getElementById("fm").submit();

    }
    function reloadiframe() {
        {#console.log("abs")#}
        {# console.log(ths)#}
        {# //dom#}
        {# console.log(ths.contentWindow.document.body.innerHTML)#}
        {# //jquery#}
        {# console.log($(ths).contents().find("body").html())#}
         var content = this.contentWindow.document.body.innerHTML
         var obj =JSON.parse(content)
         if(obj.code == 0){
             alert(obj.message)
         }

    }
</script>

   
<div>
        {#     /* 伪Ajax：基于form表单及iframe完成*/#}
    {#    /*iframe*/#}
    {#<iframe id = "iframe" style="height: 800px" width= "100%" src="http://www.baidu.com" frameborder="0"></iframe>#}
        <iframe id = "iframe" name="ifra" ></iframe>
        <form action="/ajax1.html" id="fm" method="POST" target="ifra" >
        <input name="root" value="111111" />
    {#    <input type="submit" value="提交" />#}
        <a onclick="Ajaxsubmit5()">Ajaxsubmit5</a>
</form>
</div>


<script>

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

 

4、AJAX完成文件上传

（1）、AJAX文件上传 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="/static/jquery-3.4.1/jquery-3.4.1.js"></script>
 7     <style>
 8         .btn{
 9             display: inline-block;
10             padding: 5px 10px;
11             background-color: brown;
12             color: aliceblue;
13 
14         }
15     </style>
16 </head>
17 <body>
18 <div>
19    <h3>4、通过formdata和ajax上传文件</h3>
20     <input type="file" id="img">
21     <h4>a、formdata+jquery ajax测试</h4>
22     <a class="btn" onclick="Ajaxsubmit6()">提交</a>
23     <h4>a、formdata+xmlhttprequest测试</h4>
24     <a class="btn" onclick="Ajaxsubmit7()">提交</a>
25 </div>
26 <script>
27     ///ajax上传文件：
28     //a、通过formdata和ajax发送请求
29     function Ajaxsubmit6 (){
30         file_obj=document.getElementById("img").files[0]
31         var data = new FormData()
32          data.append("k1","k2")
33          data.append("k3",file_obj)
34         $.ajax({
35             url:'/ajax1.html',
36             type:'POST',
37             data:data,
38             success:function (arg) {
39                 console.log(arg)
40             },
41             processData:false,  //通过formdata上传的时候需要自己写请求头
42             contentType:false,
43         })
44     }
45     function Ajaxsubmit7() {
46         /*通过 new 方法XMLHttpRequest对象实例*/
47         var data = new FormData()
48          data.append("k1","k2")
49         var xhr = new XMLHttpRequest();
50         /*open表示以什么方式创建连接*/
51         xhr.open('POST','/ajax1.html')
52         /*回调函数需要写在send前
53         * 详细：
54           0-未初始化，尚未调用open()方法；
55           1-启动，调用了open()方法，未调用send()方法；
56           2-发送，已经调用了send()方法，未接收到响应；
57           3-接收，已经接收到部分响应数据；
58           4-完成，已经接收到全部响应数据；*/
59         xhr.onreadystatechange=function(){
60             if (xhr.readyState == 4){
61                 console.log(xhr.responseText)
62             }
63         }
64         /*get方式没有send的数据，如果需要加数据需要在url后面直接写上*/
65         xhr.send(data);
66 
67 
68     }
69     
70     }
71 </script>
72 
73 <script>
74 
75 </script>
76 </body>
77 </html>
html

 

 1 from django.shortcuts import render,HttpResponse
 2 import json,os,uuid
 3 from django.views.decorators.clickjacking import xframe_options_exempt, xframe_options_sameorigin, xframe_options_deny
 4 # Create your views here.
 5 
 6 def upload_img(request):
 7     nid = str(uuid.uuid4())
 8     ret = {'status':True,'data':None,'message':None}
 9     obj = request.FILES.get("k3")
10 
11     file_path = os.path.join('static',nid+obj.name)
12     f = open(file_path,'wb')
13     for line in obj.chunks():
14         f.write(line)
15     f.close()
16     ret['data'] = file_path
17     ret['message'] = '上传成功'
18     return HttpResponse(json.dumps(ret))
19 ###确定上传后在吧文件路劲写到数据库去；
view.py

 

（2）、伪AJAX文件上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.4.1/jquery-3.4.1.js"></script>
    <style>
        .btn{
            display: inline-block;
            padding: 5px 10px;
            background-color: brown;
            color: aliceblue;

        }
    </style>
</head>
<body>

<script>
    function Ajaxsubmit8() {
        document.getElementById("iframe1").onload=reloadiframe1
        document.getElementById("fm1").submit();
        function reloadiframe1() {
        {#console.log("abs")#}
        {# console.log(ths)#}
        {# //dom#}
        {# console.log(ths.contentWindow.document.body.innerHTML)#}
        {# //jquery#}
        {# console.log($(ths).contents().find("body").html())#}
         var content = this.contentWindow.document.body.innerHTML;
         var obj =JSON.parse(content);
         console.log(obj);

    }

    }
</script>

<h3>5、通过iframe+form上传文件</h3>
<div>
       {#     /* 伪Ajax：基于form表单及iframe完成*/#}
    {#    /*iframe*/#}
    {#<iframe id = "iframe" style="height: 800px" width= "100%" src="http://www.baidu.com" frameborder="0"></iframe>#}
        <iframe id = "iframe1" style="display: none" name="ifra1" ></iframe>
        <form action="/ajax1.html" id="fm1" method="POST"  enctype="multipart/form-data" target="ifra1" >
            <input type="text" name="k1">
            <input type="text" name="k2">
            <input type="file" name="k3">
    {#    <input type="submit" value="提交" />#}
        <a onclick="Ajaxsubmit8()">提交</a>

        </form>
</div>
<script>

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

 

（3）、伪AJAX文件上传并预览

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="/static/jquery-3.4.1/jquery-3.4.1.js"></script>
 7     <style>
 8         .btn{
 9             display: inline-block;
10             padding: 5px 10px;
11             background-color: brown;
12             color: aliceblue;
13 
14         }
15     </style>
16 </head>
17 <body>
18 <div>
19        {#     /* 伪Ajax：基于form表单及iframe完成*/#}
20     {#    /*iframe*/#}
21     {#<iframe id = "iframe" style="height: 800px" width= "100%" src="http://www.baidu.com" frameborder="0"></iframe>#}
22         <iframe id = "iframe1" style="display: none"  name="ifra1" ></iframe>
23         <form action="/upload_img.html" id="fm1" method="POST"  enctype="multipart/form-data" target="ifra1" >
24 {#            <input type="text" name="k1">#}
25 {#            <input type="text" name="k2">#}
26             <input type="file" name="k3" onchange="uploadfile();">
27     {#    <input type="submit" value="提交" />#}
28 {#            <a onclick="Ajaxsubmit8()">提交</a>#}
29         </form>
30     <h3>上传预览</h3>
31     <div id="preview">
32     </div>
33 </div>
34 
35 <script>
36 function uploadfile() {
37         document.getElementById("iframe1").onload=reloadiframe1
38         document.getElementById("fm1").submit();
39         function reloadiframe1() {
40         {#console.log("abs")#}
41         {# console.log(ths)#}
42         {# //dom#}
43         {# console.log(ths.contentWindow.document.body.innerHTML)#}
44         {# //jquery#}
45         {# console.log($(ths).contents().find("body").html())#}
46          var content = this.contentWindow.document.body.innerHTML;
47          var obj =JSON.parse(content);
48          console.log(obj.data);
49          var tag = document.createElement('img');
50          tag.src=obj.data;
51          $("#preview").empty().append(tag)
52     }
53 
54     }
55 </script>
56 </body>
57 </html>
thml
 1 from django.shortcuts import render,HttpResponse
 2 import json,os,uuid
 3 from django.views.decorators.clickjacking import xframe_options_exempt, xframe_options_sameorigin, xframe_options_deny
 4 # Create your views here.
 5 def upload_img(request):
 6     nid = str(uuid.uuid4())
 7     ret = {'status':True,'data':None,'message':None}
 8     obj = request.FILES.get("k3")
 9 
10     file_path = os.path.join('static',nid+obj.name)
11     f = open(file_path,'wb')
12     for line in obj.chunks():
13         f.write(line)
14     f.close()
15     ret['data'] = file_path
16     ret['message'] = '上传成功'
17     return HttpResponse(json.dumps(ret))
18 ###确定上传后在吧文件路劲写到数据库去；
python

 

5、AJAX跨域

（1）、JSONP实现AJAX跨域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content"></div>
<input type="button" value="发送" onclick="submitjsonp();">
<script  src="/static/jquery-3.4.1/jquery-3.4.1.js"></script>
<script>
    //通过jsonp完成跨域请求
     function submitjsonp() {
         $.ajax({
             url:'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403',
             type:'GET',
             //jsonp方式不再按照原方式进行数据处理
             dataType:'jsonp',

             jsonp:'callback',
             jsonpCallback:'list'
         })
         function list(arg) {
                console.log(arg);
         }
     }
</script>
</body>
</html>
html

 

posted @ 2020-07-07 15:33  小菜鸡1枚  阅读(119)  评论(0)    收藏  举报