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

[http://mahua.jser.me]

markdown簡(jiǎn)明語(yǔ)法教程

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

好東西會(huì)讓人免費(fèi)為其推廣，希望我自己也能做出幾個(gè)有用的小工具。

一、JSONP的使用

jsonp，是一種數(shù)據(jù)格式，用來解決跨域問題。

比如，在 admin.chugang.net 需要一個(gè)二維碼，而在 www.chugang.net 中已經(jīng)存在生成二維碼的功能。當(dāng)然可以將www.chugang.net中生成

二維碼的代碼復(fù)制一套到 admin.chugang.net 中。但這造成了代碼的重復(fù)，此種解決方案，是不被提倡的。于是，我采用 www.chugang.net
提供API供 admin.chugang.net 調(diào)用的方案。

admin.chugang.net 使用JS調(diào)用 www.chugang.net 的接口，遇到了跨域問題。普通的ajax請(qǐng)求
代碼，如下：

$.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插件會(huì)提示不能跨域請(qǐng)求。

聽別人說過JSONP能解決跨域調(diào)用問題，但一直沒有遇到過跨域場(chǎng)景，也沒有使用過。直到在折騰自己的博客的過程中，因?yàn)椴┛痛a的路由功能不完善，導(dǎo)致我使用異步請(qǐng)求輸出數(shù)據(jù)的時(shí)候，遭遇跨域問題。直接搜索“JSONP"，對(duì)照相關(guān)資料，解決了問題。具體代碼，我仍然不能
寫出，如果需要我再解決相同的問題，我仍然需要查找demo，然后copy過來修改。但我記得，關(guān)鍵詞是

$.getJSON

它是用來讀取數(shù)據(jù)的。

前些天，在工作中，遇到類似問題，正好溫習(xí)一下JSONP。不過，該場(chǎng)景下，并不是讀取數(shù)據(jù)，而是寫數(shù)據(jù)的。網(wǎng)上找來的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請(qǐng)求并無差異
//do something
}else{
//do anthorthing
}
},
error : function(){
}
});

這是客戶端的，服務(wù)端的代碼是這樣的：

$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. ')';

記得不準(zhǔn)確，不能保證上述代碼的正確性，但關(guān)鍵點(diǎn)都寫出來了?？蛻舳舜a，可能遺漏點(diǎn)多一些。

上面的場(chǎng)景，除了使用JSONP來解決跨域，還有另一種方案。

在 admin.chugang.net 寫一個(gè)接口，在此接口中調(diào)用 www.chugang.net 提供的接口，然后再用普通的ajax請(qǐng)求
來調(diào)用 admin.chugang.net 中提供的接口。這樣就可以避免跨域。

此種方案，引申出一個(gè)問題。剛遇到ajax調(diào)用接口跨域的時(shí)候，我很疑惑：之前我曾大量調(diào)用其他不同域名站點(diǎn)的接口，為啥就沒有遇到跨域問題呢？稍微想想，知道了原因：之前的調(diào)用接口，是使用curl等方式，而不是JS；JS中才存在跨域。

提到跨域，工作中遇到過字體跨域的問題，需要配置nginx服務(wù)器。根據(jù)瀏覽器的跨域提示，一搜索就能得到大量雷同的解決方案，然而，這些方案并不起作用。后來仍然是通過檢索，獲得了有效的方案。具體配置代碼，我不記得了，它的作用是，對(duì)需要跨域的文件（比如字體），不
光要配置跨域，還要設(shè)置這些文件所在的目錄。nginx的站點(diǎn)目錄，并不是這些跨域文件的目錄。

十分佩服解決那個(gè)問題的網(wǎng)絡(luò)大神，他根據(jù)日志，大膽假設(shè)嘗試求證，解決問題。不像我，只能搜索現(xiàn)成的方案。

回頭把解決字體跨域的代碼補(bǔ)充到這篇文章。

不僅如此，關(guān)于jsonp的知識(shí)點(diǎn)，也要補(bǔ)充并且修正錯(cuò)誤內(nèi)容。博客不僅要起到輸出知識(shí)的作用，還要盡量保證其正確性。

二、批量操作功能

列表的批量操作，并且是異步請(qǐng)求，需要向服務(wù)端提交兩類數(shù)據(jù)，一個(gè)是需要操作的數(shù)據(jù)的標(biāo)識(shí)，比如PK，一個(gè)是操作類型，比如刪除。

這個(gè)請(qǐng)求由“確定”按鈕觸發(fā)。

獲取需要操作的數(shù)據(jù)的標(biāo)識(shí)，需要遍歷

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

用到的JS知識(shí)點(diǎn)：遍歷、判斷是否選中、獲取 input 的value。

獲取操作類型，需要獲取

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

這些操作，快速寫出來，我連百分之七十的把握都沒有，當(dāng)然，借助搜索引擎，可以較快搞定。

以上所述是小編給大家介紹的JSONP和批量操作功能的全部敘述，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的,在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論