JSONP和批量操作功能

JSONP和批量操作功能

推薦一個好用的在線 <code>Markdown</code> 編輯器,比我自己用 <code>Python</code> 編譯成 markdown 要方便多了。

[http://mahua.jser.me]

markdown簡明語法教程

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

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

一、JSONP的使用

jsonp,是一種數據格式,用來解決跨域問題。

比如,在 <code>admin.chugang.net</code> 需要一個二維碼,而在 <code>www.chugang.net</code> 中已經存在生成二維碼的功能。當然可
以將www.chugang.net中生成
二維碼的代碼復制一套到 <code>admin.chugang.net</code> 中。但這造成了代碼的重復,此種解決方案,是不被提倡的。于是,我采用 <code>www.chugang.net</code>
提供API供 <code>admin.chugang.net</code> 調用的方案。

<code>admin.chugang.net</code> 使用JS調用 <code>www.chugang.net</code> 的接口,遇到了跨域問題。普通的<code>ajax</code>請求
代碼,如下:

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

記得不準確,不能保證上述代碼的正確性,但關鍵點都寫出來了??蛻舳舜a,可能遺漏點多一些。

上面的場景,除了使用JSONP來解決跨域,還有另一種方案。

在 <code>admin.chugang.net</code> 寫一個接口,在此接口中調用 <code>www.chugang.net</code> 提供的接口,然后再用普通的ajax請求
來調用 <code>admin.chugang.net</code> 中提供的接口。這樣就可以避免跨域。

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

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

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

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

不僅如此,關于jsonp的知識點,也要補充并且修正錯誤內容。博客不僅要起到輸出知識的作用,還要盡量保證其正確性。

二、批量操作功能

列表的批量操作,并且是異步請求,需要向服務端提交兩類數據,一個是需要操作的數據的標識,比如PK,一個是操作類型,比如刪除。

這個請求由“確定”按鈕觸發(fā)。

獲取需要操作的數據的標識,需要遍歷

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

用到的JS知識點:遍歷、判斷是否選中、獲取 <code>input</code> 的value。

獲取操作類型,需要獲取

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

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現,斷路器,智...
    卡卡羅2017閱讀 136,534評論 19 139
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,917評論 25 709
  • JavaScript是一種在Web開發(fā)中經常使用的前端動態(tài)腳本技術。在JavaScript中,有一個很重要的...
    西瓜w閱讀 1,914評論 0 1
  • 有個問題,你問過我三遍了。我卻三次逃避。 你問我: “你喜歡我呀”。 第一次你問我的時候我在給你講我飛機上旁邊坐了...
    忘了名字的人閱讀 262評論 0 0
  • 今天我莫名其妙的感到煩躁。還是孩子問題。我在交流群里,不斷的感慨,把自己的心情往外流露。 感賞孩子今天中午在家吃飯...
    山東笑笑爸閱讀 162評論 0 0

友情鏈接更多精彩內容