JSONP和批量操作功能的實(shí)現(xiàn)方法
推薦一個(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)站的支持!
相關(guān)文章
JavaScript實(shí)現(xiàn)鼠標(biāo)控制自由移動(dòng)的窗口
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)控制自由移動(dòng)的窗口,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06微信小程序?qū)崿F(xiàn)定位及到指定位置導(dǎo)航的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)定位及到指定位置導(dǎo)航的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08JavaScript中AOP的實(shí)現(xiàn)與應(yīng)用
這篇文章主要給大家介紹了關(guān)于JavaScript中AOP的實(shí)現(xiàn)與應(yīng)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05探討javascript是不是面向?qū)ο蟮恼Z(yǔ)言
這篇文章主要是介紹了javascript是不是面向?qū)ο蟮恼Z(yǔ)言。需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-11-11