這次帶給大家使用JSONP的案列歸納，使用JSONP的注意事項有哪些，下面就是實戰案例，一起來看一下。 json和JSONP這二者在開發中還是很常見的，此處JSON暫且不說。 一個眾所周知的問題，Ajax直接請求普通文件存在跨域無權限存取的問題，甭管你是靜態頁面、動態網頁、web服務、WCF，只要是跨域請求，一律不準，這就是為什麼要使用JSONP的原因（由於Web頁面上調用js檔案時則不受是否跨域的影響（不僅如此，我們還發現凡是擁有”src”這個屬性的標籤都擁有跨域的能力，例如、<img>、<iframe>））；</p> <p style="text-align: left;">須知ajax和jsonp其實本質上是不同的東西。 ajax的核心是透過XmlHttpRequest取得非本頁內容，而jsonp的核心則是動態新增<script>標籤來呼叫伺服器提供的js腳本。 </p> <pre>private void GetTop10() throws IOException { String jsonCallback = _request.getParameter("jsonCallback"); String id = _request.getParameter("id"); String return_JSONP = top10Setup.ReadTop10(id ); return_JSONP = jsonCallback + "(" + return_JSONP + ");"; System.out.println( return_JSONP ); _response.getWriter().println( return_JSONP ); }</pre> <p style="text-align: left;">前端程式碼</p> <pre>function appendListOne() { $.jsonp({ 'contentType': "application/json; charset=utf-8", 'url': AjaxGetUrl, 'data': { dz_type: 'GetTop10', id: 17 }, 'dataType':"jsonp", 'callbackParameter':"jsonCallback", 'async':false, 'type': 'post', 'success': function (data) { console.warn( data ); $("#list1>tbody").empty(); var str=""; for(var key=0;key<data.dblist.length;key++){ var dd=data.dblist[key]; if(key <5){ str+='<tr><td><b class="ranking">' +(parseInt(key)+1)+ '</b><span class="name">'+dd.data_name+'</span></td>' + '<td> <span class="detail">'+dd.data_value+'.'+dd.data_value2+'.'+dd.data_value3+'.'+dd.data_value4 +'</span> </td> </tr>'; } } $("#list1>tbody").append(str); } }); }</pre> <p>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ </p> <p>推薦閱讀：</p> <p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-394223.html" target="_blank">在js中怎麼把json當做參數使用</a></p> <p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-394222.html" target="_blank">JS裡字串轉json方法總結</a> <br></p>
