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> |
跨域ajax代码效果：
