美文网首页我爱编程
ajax 补充

ajax 补充

作者: 两分与桥 | 来源:发表于2018-05-21 22:55 被阅读18次

jquery 中封装了ajax，使得我们可以十分便捷的使用ajax，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap.css">
</head>
<body>
<h1>ajax</h1>
<a class="btn btn-info" onclick="AjaxSubmin1()">Jquery-点我</a>

<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    function AjaxSubmin1() {
        $.ajax({
            url: '/ajax.html',
            type: "get",
            data: {'a':1},
            success:function (arg) {
                console.log(arg);
            }
        })
    };
</script>
</body>
</html>

而原生的ajax，也必须要学会使用，对吧，，下面这个是ajax发送get请求，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap.css">
</head>
<body>
<h1>ajax</h1>
<a class="btn btn-primary" onclick="AjaxSubmin2()">原生ajax-点我</a>

    function AjaxSubmin2() {
        var xhr = new XMLHttpRequest(); // new 为建立一个对象
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4){ // 检测状态，如果为4，就意味着接收完毕服务器返回的数据
                console.log(xhr.responseText)
            }
        };
        xhr.open('get','/ajax.html?a=1'); // 在这里我们只能手动添加数据的路径
        xhr.send(null);
    }

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

jquery ajax 的 post 发送数据

    function AjaxSubmin1() {
        $.ajax({
            url: '/ajax.html/',  // 这里相对于get方式路径后需要多加一个 / 
            type: "post",
            data: {'a':1},
            success:function (arg) {
                console.log(arg);
            }
        })
    };

原生 ajax 的 post 方式

    function AjaxSubmin2() {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4){
                console.log(xhr.responseText)
            }
        };
        xhr.open('post','/ajax.html/'); // 这里的路径后也必须添加一个 /
        // 这里必须添加一个请求头，要不然django识别不出请求头就不会去请求体中提取数据，
        // 也就是说不添加请求头数据也是可以发送过去的，只是django不能识别，发送的数据放在 request.body 中
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
        xhr.send("a=1");
    }

iframe 挺有意思的，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap.css">
</head>
<body>
<h1>ajax</h1>

<div>
    <input id="url" type="text" placeholder="请输入URL"><a onclick="test1()">查看</a>
</div>
<iframe id="iframe" src="http://www.baidu.com" frameborder="0" style="width: 600px;height: 800px;"></iframe>
<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    function test1() {
        url = $("#url").val();
        $("#iframe").attr("src",url);
    }
</script>
</body>
</html>

iframe 可以嵌套两层，之后就不行了。

iframe 和 form 表单可以构成伪ajax，(利用 iframe 的页面不刷新特性，和 form 提交数据的功能)，target 和 name 是关键点。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap.css">
</head>
<body>
<h1>伪ajax</h1>
<form action="/ajax.html/" method="post" id="fm" target="iframe">
    <input type="text" value="libai" name="user">
    <a onclick="test()">提交</a>
</form>
<iframe name="iframe"></iframe>

<script>
    function test() {
        document.getElementById("fm").submit();
    }
</script>
</body>
</html>

form 提交后返回的数据会显示在 iframe 中，这种方式是兼容性最好的，很多网站上传文件都是通过这种方式做的，iframe 历史悠久，所以很多浏览器都支持，效果也好



利用 iframe 和 form 表单提交，我们要如何去取得 iframe 中的数据呢，什么时候去取呢，在 iframe 接收到数据，也就是 iframe 加载的时候去取就行了 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap.css">
</head>
<body>
<h1>伪ajax</h1>
<form action="/ajax.html/" method="post" id="fm" target="iframe">
    <input type="text" value="libai" name="user">
    <a onclick="test()">提交</a>
</form>
<iframe name="iframe" onload="onloadtest(this)" id="ifr"></iframe>
<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    function test() {
        document.getElementById("fm").submit();
    }
    function onloadtest(that) {
        console.log(that.contentWindow.document.body.innerHTML);  // js 取得数据
        console.log($(that).contents().find('body').html()); // jquery 取得iframe数据
    }
</script>
</body>
</html>
# 这个方法会报错，在第一次加载页面时，会提示 onloadtest（）方法找不到，因为整个html都是
# 从上到下加载的，自然而然就找不到了，我们可以用另外绑定函数的方式来解决
# 要十分注意是如何传递 this 参数的

用绑定函数的方式，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap.css">
</head>
<body>
<h1>伪ajax</h1>
<form action="/ajax.html/" method="post" id="fm" target="iframe">
    <input type="text" value="libai" name="user">
    <a onclick="test()">提交</a>
</form>
<iframe name="iframe" id="ifr"></iframe>
<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    function test() {
        document.getElementById(("ifr")).onload = onloadtest; // 按下按钮时为iframe绑定
        document.getElementById("fm").submit(); 
    }
    function onloadtest() {
        console.log(this.contentWindow.document.body.innerHTML);
        console.log($(this).contents().find('body').html());
    }
</script>
</body>
</html>

iframe 和 form 的 伪 ajax 提交方式，post 和 get 只需要修改 form 中的 type 就行了，其他的都一样。


ajax 和 js 上传文件 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap.css">
</head>
<body>
<h1>文件上传</h1>
<input type="file" id="img">
<a onclick="test1()" class="btn btn-primary">jquery 上传</a>
<a onclick="test2()" class="btn btn-danger">js 上传</a>
<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    function test1() {
        var data = new FormData();
        data.append('k1','v1');
        data.append('k2','v2');
        data.append('k3',document.getElementById(("img")).files[0]);
        $.ajax({
            url: "/ajax.html/",
            type: "POST",
            data: data,
            processData: false,  // tell jQuery not to process the data
            contentType: false,  // tell jQuery not to set contentType
            success:function (arg) {
                console.log(arg);
            }
        })
    }
    function test2() {
        var data = new FormData();
        data.append('k1','v1');
        data.append('k2','v2');
        data.append('k3',document.getElementById(("img")).files[0]);
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if(xhr.readyState==4){
                // 接收完毕服务器返回的数据
                console.log(xhr.responseText)
            }
        };
        xhr.open("POST","/ajax.html/");  // 这里不用再设置 setHeader
        xhr.send(data);
        }

</script>

</body>
</html>

iframe 和 form 上传文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap.css">
</head>
<body>
<h1>文件上传</h1>
<form action="/ajax.html/" method="post" id="fm" target="iframe" enctype="multipart/form-data">
    <input type="text" name="k1">
    <input type="text" name="k2">
    <input type="file" name="k3">
    <a onclick="test()">提交</a>
</form>
<iframe name="iframe" id="ifr"></iframe>
<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    function test() {
        document.getElementById(("ifr")).onload = onloadtest; // 按下按钮时为iframe绑定
        document.getElementById("fm").submit();
    }
    function onloadtest() {
        console.log($(this).contents().find('body').html());
    }
</script>
</body>
</html>

iframe 的框可以设置为 display:none ，就隐藏了

上传文件，并在服务器端保存，保存完毕后在网页上显示出来。 
# views.py 文件
from django.shortcuts import render
from django.shortcuts import HttpResponse
import json
import os
import uuid

def index(request):
   if request.method == "GET":
       return render(request, "index.html")

def upload(request):
   nid = uuid.uuid4()
   result = {'status':True,"data":None}
   img = request.FILES.get("img")
   print(img.name)
   base_dir = os.path.join("static",str(nid)+img.name)
   f = open(base_dir,"wb")
   for line in img.chunks():
       f.write(line)
   f.close()
   print(base_dir)
   result["data"] = '\\' + base_dir
   return HttpResponse(json.dumps(result))


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
</head>
<body>
<form action="/upload.html/" method="post" id="fm" target="iframe" enctype="multipart/form-data">
    <input type="file" name="img" onchange="test()">
</form>
<iframe name="iframe" id="ifr" style="display: none"></iframe>
<h3>预览</h3>
<div id="preview"></div>
<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    function test() {
        document.getElementById(("ifr")).onload = onloadtest; // 按下按钮时为iframe绑定
        document.getElementById("fm").submit();
    }
    function onloadtest() {
        var response = $(this).contents().find('body').html();
        response = JSON.parse(response);
        console.log(response);
        console.log(response.data);
        var image = $("<img>");
        image.attr("src",response['data']);
        $("#preview").empty().append(image)

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


jsonp，跨域请求，利用script可以跨域的特性实现跨域交流。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="submit" value="发送1" onclick="test1()">
<input type="submit" value="发送2" onclick="test2()">
<div id="preview"></div>

<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    function test1() {
        $.ajax({
            url: "/ajax.html",
            type: 'GET',
            data: {bbc: 222},
            success: function (arg) {
{#                console.log(arg);#}
                var p_ele = $("<p>");
                p_ele.html(arg);
                $("#preview").append(p_ele);
            }
        })
    }
    function test2() {
        var tag = $("<script>");
        tag.attr('src','http://127.0.0.1:9000/jsonp.html');
        document.head.appendChild(tag[0]);
        document.head.removeChild(tag[0]);
    };
    function func(arg) {  # 这里的 func 要和返回的一致，arg为返回的数据，也就是 anthor server 
        var p_ele = $("<p>");
        p_ele.html(arg);
        $("#preview").append(p_ele);
    }
</script>
</body>
</html>

# 我在 9000 端口上运行了另一个 django ，相对应的视图函数为
def jsonp(request):
    return HttpResponse("func('anthor server');")

在jquery上，也为我们做好了封装，看下面的

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

<input type="submit" value="发送1">
<input type="submit" value="发送2" onclick="test2()">
<div id="preview"></div>

<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    function test2() {
        $.ajax({
            url: "http://127.0.0.1:9000/jsonp.html",
            type: 'GET',
            dataType: 'jsonp',  // 不同于json，这里封装了创建script标签并移除的代码，
        })  // 效果也是一样的
    }
    function func(arg) {
        var p_ele = $("<p>");
        p_ele.html(arg);
        $("#preview").append(p_ele);
    }
</script>
</body>
</html>


note 
提交：
    - Form
    - Ajax

一、Ajax，偷偷向后台发请求
    - XMLHttpRequest
        - 手动使用
        - jQuery
    - “伪”Ajax
        - iframe标签
        - form表单
    
二、Ajax上传文件
    - jQuery
    - 原生
    以上两种方式可利用formData对象，来封装用户提交的数据,但是formData并不是所有浏览器都支持，
    还是兼容性的问题，（考虑到低版本的IE）
    
    - Iframe+Form 兼容性最好的方式
    
    ******Iframe+Form*******



三、JSONP 跨域Ajax
    
    浏览器同源策略：XMLHttpRequest
    巧妙的机制JSONP
    
    JSONP：是一种方式，并非数据结构，返回数据时有条件限制，
        利用创建script块，在其中执行src属性为：远程url
        返回--函数(返回值)
        
        function 函数(arg){
            
        }
         jsonp 只能发get请求，不管怎么写，都是get方式
        
注意：CORS  ，跨站资源共享

参考博客：http://www.cnblogs.com/wupeiqi/articles/5703697.html
http://www.cnblogs.com/wupeiqi/articles/5702910.html

相关文章

  • ajax 补充

    jquery 中封装了ajax，使得我们可以十分便捷的使用ajax， 而原生的ajax，也必须要学会使用，对吧，，...

  • jQuery补充和Ajax基础

    jQuery的补充 Ajax 列子1 列子2

  • Ajax补充（一）

    继之前学习的认识Ajax相关基础内容，今天将做一些补充学习。 （一）onreadystatechange事件的补充...

  • js原生ajax

    原生ajax的写法： 1.get 2.post 3.可以封装到方法中使用 4.补充一点

  • springmvc后台往页面传值

    先说说页面往后台传值的方法，欢迎补充：一、form表单提交（常用）二、JQuery中的ajax提交（常用）三、通过...

  • 2019-02-14 day9 jQuery和Ajax 和拖动方

    01jQuery补充 02Ajax基础 主要是get/post进行网络请求获取数据 03拖动方块移动 注意移动的时...

  • Ajax 实现瀑布流

    1.写在前面： 补充个知识点，当我们用 Ajax 来请求 json 数据的时候，类似这样$.get("a.json...

  • Step by step

    ----针对多多少少已经有点工作经验的盆友 补充那些被遗忘、忽略的知识 (重点是面试中曾出现过的问题 ajax、...

  • AJAX

    主要内容： ajax 是什么、原生ajax 写法和jQuery ajax写法。 AJAX 是什么 ajax，即As...

  • JavaScript进阶知识点--AJAX及JSON

    AJAX 关于 AJAX 什么是 AJAX AJAX 的全称是 Asynchronous JavaScript a...

网友评论

    本文标题：ajax 补充

    本文链接：https://www.haomeiwen.com/subject/vplcjftx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    我爱编程

    关于我们|服务条款|联系我们|ajax 补充|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！