function getData() { $.ajax({ url: 'http://v.juhe.cn/WNXG/city', type: 'get', data: { key: 'bffc09994a8c2ca50357582f2c327b3e' }, timeout: 5000, dataType: 'jsonp', jsonp: "message", jsonpCallback: "message", }); } function message(data) { console.log(); }
Demo：
ajax.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no"> <script src="js/jquery.min.js"></script> <script src="js/bscroll.min.js"></script> <style type="text/css"> * { margin: 0; padding: 0; } .border-1px { position: relative; } .border-1px:after { display: block; position: absolute; left: 0; bottom: 0; width: 100%; border-top: 1px solid rgba(7, 17, 27, .1); content: ' '; } @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) { .border-1px::after { -webkit-transform: scaleY(0.7); transform: scaleY(0.7); } } @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) { .border-1px ::after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } .ellipsis-1{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;word-break:break-all} .ellipsis-1{-webkit-line-clamp:1} .wrap { margin: 50px; width: 300px; border: 1px #ccc solid; box-shadow: 0 0 5px #aaa; border-top-left-radius: 6px; border-top-right-radius: 6px; overflow: hidden; } .wrap h3 { height: 60px; line-height: 60px; background: #9cc4f6; text-align: center; color: #fff; } .list-wrapper { height: 400px; overflow: hidden; } .list li dt, .list li dd { height: 30px; line-height: 30px; } .list li dt { padding-left: 10px; font-size: 18px; color: #333; } .list li dd { padding-left: 16px; font-size: 16px; color: #666; } </style> </head> <body> <div class="wrap"> <div> <h3>遍历对象数据</h3> <div class="wrapper list-wrapper"> <ul class="list content" id="list"> <li class="border-1px"> <dl> <dt class="">标题</dt> <dd>数据1</dd> <dd>数据2</dd> </dl> </li> <li class="border-1px"> <dl> <dt>标题</dt> <dd>数据1</dd> <dd>数据2</dd> </dl> </li> </ul> </div> </div> </div> </body> <script> getData(); function getData() { $.ajax({ url: 'http://apis.juhe.cn/webscan/?callback=?&domain=juhe.cn&key=e8653d8956536b7ee9fdc538be7bb707', type: 'get', async: true, data: {}, timeout: 5000, dataType: 'jsonp', beforeSend: function (xhr) { }, success: function (data) { if (data.reason == 'Successed!') { console.log(data); var result = data.result.data; loadData(result); } else { console.log('请求数据失败！'); } }, error: function (xhr, textStatus) { }, complete: function () { } }); } function loadData(data) { var em = $('#list'); var a = []; for (var i in data) { if (i != 'loudong') { console.log(i); console.log(data[i]); var g = '<li class="border-1px">'; g += '<dl>'; g += '<dt class="ellipsis-1">' + i + '</dt>'; g += '<dd class="ellipsis-1">' + data[i].msg + '</dd>'; g += '</dl>'; g += '</li>'; a.push(g); } } em.html(a.join('')); var wrapper = document.querySelector('.wrapper') var scroll = new BScroll(wrapper); } </script> </html>
