JSONP和大量操作功能的實現方法，jsonp功能實現

JSONP和大量操作功能的實現方法，jsonp功能實現

推薦一個好用的線上 Markdown 編輯器，比我自己用 Python 編譯成 markdown 要方便多了。

[http://mahua.jser.me]

markdown簡明文法教程

[http://www.appinn.com/markdown/]

好東西會讓人免費為其推廣，希望我自己也能做出幾個有用的小工具。

一、JSONP的使用

jsonp，是一種資料格式，用來解決跨域問題。

比如，在 admin.chugang.net 需要一個二維碼，而在 www.chugang.net 中已經存在產生二維碼的功能。當然可以將www.chugang.net中產生

二維碼的代碼複製一套到 admin.chugang.net 中。但這造成了代碼的重複，此種解決方案，是不被提倡的。於是，我採用 www.chugang.net
提供API供 admin.chugang.net 調用的方案。

admin.chugang.net 使用JS調用 www.chugang.net 的介面，遇到了跨域問題。普通的ajax請求
代碼，如下：

$.ajax({type : "post",url : 'http://www.chugang.net/api',dataType : 'json',data : {'id' : 5, 'type' : 3},beforeSend : function(){},success : function(returnMsg){//},error : function(){} });

在使用過程中，若使用的是firefox，firebug外掛程式會提示不能跨域請求。

聽別人說過JSONP能解決跨域調用問題，但一直沒有遇到過跨域情境，也沒有使用過。直到在折騰自己的部落格的過程中，因為部落格代碼的路由功能不完善，導致我使用非同步請求輸出資料的時候，遭遇跨域問題。直接搜尋“JSONP"，對照相關資料，解決了問題。具體代碼，我仍然不能
寫出，如果需要我再解決相同的問題，我仍然需要尋找demo，然後copy過來修改。但我記得，關鍵詞是

$.getJSON

它是用來讀取資料的。

前些天，在工作中，遇到類似問題，正好溫習一下JSONP。不過，該情境下，並不是讀取資料，而是寫資料的。網上找來的demo是這樣的：

$.ajax({type : 'post',url : 'http://www.chugang.net/api',dataType : 'jsonp',data : {'username' : 'cg', 'action' : 'add'},beforeSend: function(){},success : function(returnMsg){if(returnMsg.success){ //注意，此處，與普通ajax請求並無差異//do something}else{//do anthorthing}},error : function(){}});

這是用戶端的，服務端的代碼是這樣的：

$callBack = isset($_GET['callBack'])?$_GET['callBack']:'';$returnMsg = ['code' : 1000,'success' : true,'message' : 'Nothing is difficult if you put your heart into it!',];$json = json_encode($returnMsg);echo $classBack . '(' . $json. ')';

記得不準確，不能保證上述代碼的正確性，但關鍵點都寫出來了。用戶端代碼，可能遺漏點多一些。

上面的情境，除了使用JSONP來解決跨域，還有另一種方案。

在 admin.chugang.net 寫一個介面，在此介面中調用 www.chugang.net 提供的介面，然後再用普通的ajax請求
來調用 admin.chugang.net 中提供的介面。這樣就可以避免跨域。

此種方案，引申出一個問題。剛遇到ajax調用介面跨域的時候，我很疑惑：之前我曾大量調用其他不同網域名稱網站的介面，為啥就沒有遇到跨域問題呢？稍微想想，知道了原因：之前的調用介面，是使用curl等方式，而不是JS；JS中才存在跨域。

提到跨域，工作中遇到過字型跨域的問題，需要配置nginx伺服器。根據瀏覽器的跨域提示，一搜尋就能得到大量雷同的解決方案，然而，這些方案並不起作用。後來仍然是通過檢索，獲得了有效方案。具體配置代碼，我不記得了，它的作用是，對需要跨域的檔案（比如字型），不
光要配置跨域，還要設定這些檔案所在的目錄。nginx的網站目錄，並不是這些跨域檔案的目錄。

十分佩服解決那個問題的網路大神，他根據日誌，大膽假設嘗試求證，解決問題。不像我，只能搜尋現成的方案。

回頭把解決字型跨域的代碼補充到這篇文章。

不僅如此，關於jsonp的知識點，也要補充並且修正錯誤內容。部落格不僅要起到輸出知識的作用，還要盡量保證其正確性。

二、大量操作功能

列表的大量操作，並且是非同步請求，需要向服務端提交兩類資料，一個是需要操作的資料的標識，比如PK，一個是操作類型，比如刪除。

這個請求由“確定”按鈕觸發。

擷取需要操作的資料的標識，需要遍曆

<input type="checkbox" name="id[]" />

用到的JS知識點：遍曆、判斷是否選中、擷取 input 的value。

擷取操作類型，需要擷取

<select><option value="show">Show</option><option value="update">Update</option></select>

這些操作，快速寫出來，我連百分之七十的把握都沒有，當然，藉助搜尋引擎，可以較快搞定。

以上所述是小編給大家介紹的JSONP和大量操作功能的全部敘述，希望對大家有所協助，如果大家有任何疑問歡迎給我留言，小編會及時回複大家的,在此也非常感謝大家對幫客之家網站的支援！