jsonp之jQuery.getScript()方法的简单使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>getScript简单学习</title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        /*
            参考:http://www.365mini.com/page/jquery_getscript.htm
                  http://www.w3school.com.cn/jquery/ajax_getscript.asp
                  http://www.css88.com/jqapi-1.9/jQuery.getScript/
                  http://www.111cn.net/wy/jquery/83696.htm
                   
             
            1.jQuery.getScript()函数用于通过HTTP GET形式加载
              Javascript文件并运行它。
             
            2.该函数用于动态加载JS文件,并在全局作用域下执行文件中的JS代码。
             
            3.该函数可以加载跨域的JS文件。请注意,该函数是通过异步加载数据的。
             
            4.该函数属于全局的jQuery对象。
             
            5.注意:如果多次加载相同URL的js文件,即使服务器对js文件启用了缓存,
              在第二次及以后加载该js文件时,jQuery.getScript()仍然不会缓存。
              因为该函数会在js文件的URL后面添加一个时间戳参数后缀,
              从而避免浏览器获取缓存的js文件。
             
            6.请注意不要直接在jQuery.getScript()执行后直接调用该js文件中
              的变量或函数,因为jQuery.getScript()是异步加载的,
              在你访问其中的某个变量或函数时,可能该js文件尚未完全加载完毕。
              建议你最好在success回调函数中处理,
              或者你能够确认此时该js文件已经加载完毕。
        */
         
        $.getScript("http://js.tv.itc.cn/kao.js",function(){
            $("#go").click(function(){
                alert("OK");
            });
        });
         
        //回到函数的三个返回值,第一个返回值,第二个是状态,第三个是状态码
        $.getScript("http://js.tv.itc.cn/kao.js",function(data,textStatus,jqxhr){
            console.log(data); //undefiend  
            console.log(textStatus); //success
            console.log(jqxhr.status); // 200
            console.log("Load was performed!");
        });
         
        //处理错误情况
        $.getScript("http://js.tv.itc.cn/dicta.js")
         .done(function(data,textStatus,jqxhr){ //也可以只要前两个参数或前一个
            console.log("Load was performed1--------------!");
            console.log(data); //undefined
            console.log(textStatus); //success
            console.log(jqxhr.status); // 200
            console.log("Load was performed1--------------!");
         })
         .fail(function(jqxhr, settings, exception){
            console.log("***********************************!");
            console.log("***********************************!");
         });
         
     
        $(document).ready(function(){
         
             
         
        });
    </script>
</head>
<body>
    <button id="go">Run</button>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>JSONP之getScript的用法</title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        /*
            我们在这边文章中分析了JSONP:http://hanchaohan.blog.51cto.com/2996417/1291927
             
            下面我分析一下使用匿名JSONP的使用方法。
             
            比如:http://store.tv.sohu.com/web/stpc/saveInformation.do
            返回的是:var result={"status":-2} 。
            接口又不支持JSONP,我们此时使用匿名JSONP格式就比较好!
             
        */
         
        $(document).ready(function(){
            var t=encodeURIComponent($("#form_name").val()),
                a=encodeURIComponent("北京"),
                f=encodeURIComponent("北京"),
                r=encodeURIComponent("hanchaohan@sohu-inc.com"),
                l=encodeURIComponent("demo"),
                c=encodeURIComponent("13581746914");
                 
                $.getScript("http://store.tv.sohu.com/web/stpc/saveInformation.do?type="
                    +75+"&name="+t+"&email="+r+"&phone="
                    +c+"&province="+a+"&city="+f+"&dealer="+l+"",function(data,textStatus,jqxhr){
                            console.log("get--------------!");
                            console.log(data); //undefined
                            console.log(textStatus); //success
                            console.log(jqxhr.status); // 200
                            console.log("get--------------!");
                     
                            //接口返回的是:var result={"status":0}
                            console.log(result.status);
                            console.log("\u53c2\u6570\u6709\u8bef\uff01");
                            alert("\u63d0\u4ea4\u5931\u8d25")
                });
        });
         
         
    </script>
</head>
<body>
    <form action="#" >
        <input type="" id="form_name" value="韩超"/>
    </form>
</body>
</html>


上一篇:ASP.NET MVC5+EF6+EasyUI 后台管理系统(75)-微信公众平台开发-用户管理


下一篇:Minima黑色响应式后台管理模板