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({ 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 > |