jQuery--ajax

ajax:

请求一个url并拿到返回值，并且不刷新页面。

主要知识点：

ajax的书写格式，本地和跨域的格式区别；

代码示例：

本地获取django返回值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<input type="button" value="本地ajax" onclick="AjaxRequest()" />
<div id="request_times" ></div>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    function AjaxRequest(){
        $.ajax({
            url:'/ajax_request/',   //发送到django程序
            type:'GET',
            data:{"k1":"v1","k2":"v2"},
            success:function(data){
                //当请求成功，并从远程获取返回值；如果返回的是字典，浏览器自动json解析;
                console.log(data);
                //显示在网页上
                $("#request_times").append(data);
            },
            error:function(){
 
            }
        })
    }
</script>
本地ajax效果


跨域获取某个电视台的节目表，并列出内容
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
<input type="button" onclick="AjaxRequest()" value="跨域Ajax" />
<div id="container"></div>
 
<script src="jquery-2.1.4.min.js" type="text/javascript"></script>
    <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>
跨域ajax代码效果：






posted @ 2016-02-26 09:56  大亮头  阅读(237)  评论(0)    收藏  举报