成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

簡單的前后端交互流程（AJAX）

kumfo / 1238人閱讀

摘要：今天呢，我想要說的主題是工作中的前后端交互。古老的表單提交這種形式呢，比較早，以后端為主。前端提交表單，后端驗證。后端基本就做接口，做權(quán)限，其他的都交由前端去完成。參數(shù)只有一個名字的值這個是后端人員規(guī)定的。

這是我寫的第一篇文章，想想還有點小激動呢。本著助人為樂的思想，認(rèn)識了一些前端的初學(xué)者，幫助他們更快的步入到前端這個一個行業(yè)。今天呢，我想要說的主題是：工作中的前后端交互。

1.古老的表單提交
    這種形式呢，比較早，以后端為主。前端提交表單，后端驗證(jsp,request.getParameter(""))。這種方式后端做的比較多，我就不特別說明了。
2.AJAX的數(shù)據(jù)提交
    這種形式呢，現(xiàn)在用的較多。后端基本就做接口，做權(quán)限，其他的都交由前端去完成。這個呢就是我們今天主要說的。
3.表單和AJAX結(jié)合
    適合的才是最好的。這點我深信不疑

常見的幾種方式，我已經(jīng)說明了。接下來我們談一談我們需要什么東西。
場景一：

XXX:我們公司要做接口，我要怎么辦？
LN:哦，接口文檔發(fā)我看看。
XXX:什么是接口文檔，我沒有??？
LN:接口文檔由四部分組成：（這個看個人習(xí)慣有的寫得特別簡陋，所以第一次的時候問清楚每個參數(shù)意思）
    1.接口地址 URL
    2.請求方式 get/post
    3.請求參數(shù) page,pageNum
    4.響應(yīng)參數(shù) state,list
XXX:哦哦，這樣啊，那我和他們要一下。
    接口：/mvc/training/ge
    請求：key,orderBy,begin,length
LN:沒給你響應(yīng)，也沒有給你請求方式啊。
    1.給接口補全URL,域名/mvc/training/ge。
    2.把你補全的URL，扔到瀏覽器的地址欄，看看返回的是什么。當(dāng)然如果請求參數(shù)里面有必填項，那你要用URL?key=value&key2=value2的形式模擬get請求。
        2.1 瀏覽器把服務(wù)器端的響應(yīng)給你顯示了出來。然后你對照這個問后端人員每個是什么意思。
        2.2 拋出405錯誤。這個就比較凄慘了。禁止get請求，那你有兩種方式一個是下載一款軟件可以模擬post請求，一個是直接寫AJAX，然后改成post方式。
    3.由上面我們已經(jīng)知道接口的四部分了，那我們就要用ajax獲取我的數(shù)據(jù)了.
     $.ajax({
             url: "/mvc/training/ge",//請求接口
             type: "POST",//請求方式
             data: {key:1},//請求參數(shù)
             dataType: "json",//響應(yīng)類型
             success: function(data, textStatus){//訪問成功的回調(diào)函數(shù)，參數(shù)是響應(yīng)，描述狀態(tài)的字符串
                 console.log(data);
             },
             error: function(XMLHttpRequest, textStatus, errorThrown){//訪問失敗的回調(diào)函數(shù)，參數(shù)是XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選);
             }
    });
    個人大力推薦這個，第二步就可以省去了。success的console.log(data);也可以看到響應(yīng)，完美的劇情。當(dāng)然，你不要告訴我，你不會看控制臺。
XXX:恩恩。好的。我試試去。

場景二：
XXX:這是我的接口。我要怎么做我的頁面啊。邏輯怎么寫。

LN:

$.ajax(
    method:"GET",//對于請求類型
    url:"/isNickName",//請求url，這個我抹黑了。直接復(fù)制過來就可以了
    dataType: "json",
    data: {nickName:$.trim($("#checktips").val())},//這個是一個驗證是否重名的接口。參數(shù)只有一個 名字
).done(function(data){
    if(data.code == 0){//data.code的值這個是后端人員規(guī)定的。
        console.log("請求成功");
        if(data.object==1){//1為重復(fù)
            console.log("這個nickName重復(fù)啦");
            $("#retips").show();
        }else if(data.object==0){
            console.log("這個nickName不重復(fù)");
            $("#retips").hide();
        }else{
            console.log("未知異常");
        }
    }else if(data.code == -2){
        console.log("你沒有權(quán)限，通常來講，你是沒有登錄");
    }else if(data.code == -5){
        console.log("參數(shù)錯誤哦。");
    }else{
        console.log(data.result);
    }
}).fail(function(a,b,c){
    console.log("接口出問題啦");
})

我簡單的解釋一下上面這個代碼，.done()里面的代碼肯定每次都不一樣。所以說肯定不能網(wǎng)上隨便復(fù)制一個就可以，和公司的后端人員問清楚每一個參數(shù)的作用意義，對于寫代碼是特別有幫助的。從接口文檔可以看出，這個人后端十分的懶，我所有的參數(shù)都是訪問了以后然后自己猜出來的。

場景有上面的兩個，我覺得已經(jīng)可以了。就不在寫了

文章的最后我們來說一下 調(diào)用 和 .done事件里面的代碼 雖然這兩個沒有關(guān)系。

1.調(diào)用
    最簡單的調(diào)用方法$(selector).on("click",function(){里面放剛才場景二的代碼})。
    但是我們有的時候用的不是click.
    blur 失去焦點的時候觸發(fā)
    change 失去焦點然后判斷是否改變，改變觸發(fā)
    keyDown keyup 按下抬起（這個是最好的，但是要用去抖，下一篇說）
2.done(function(){})
    這個里面一般來說，就是我們用得到的數(shù)據(jù)去和我們的DOM節(jié)點做一些操作。這個每個項目都不一樣。但是肯定都和DOM的操作啦渲染啦有關(guān)。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91071.html

相關(guān)文章

  • 一種SPA（單頁面應(yīng)用）架構(gòu)

    摘要：個人認(rèn)為單頁面應(yīng)用的優(yōu)勢相當(dāng)明顯前后端職責(zé)分離，架構(gòu)清晰前端進(jìn)行交互邏輯，后端負(fù)責(zé)數(shù)據(jù)處理。上面的這種單頁面應(yīng)用也有其相應(yīng)的一種開發(fā)工作流，當(dāng)然這種工作流也適合非單頁面應(yīng)用進(jìn)行產(chǎn)品功能原型設(shè)計。 未經(jīng)允許，請勿轉(zhuǎn)載。本文同時也發(fā)布在我的博客。 （如果對SPA概念不清楚的同學(xué)可以先自行了解相關(guān)概念） 平時喜歡做點小頁面來玩玩，并且一直采用單頁面應(yīng)用（Single Page Appl...

    Codeing_ls 評論0 收藏0

  • WEB程序的前后端數(shù)據(jù)交互流程

    摘要：說明我寫這篇文章的目的其實是想科普一下基礎(chǔ)的數(shù)據(jù)傳輸和交互流程，其實也就是寫協(xié)議相關(guān)的一些東西。同樣，相對于后端程序來說也無外乎就是一大堆有一定意義的字符串，而對于腳本來說，就是表示一個數(shù)據(jù)對象。 說明 我寫這篇文章的目的其實是想科普一下基礎(chǔ)的數(shù)據(jù)傳輸和交互流程，其實也就是寫http協(xié)議相關(guān)的一些東西。而寫這篇文章也主要是源于最近和長久以來很多人問的問題都是有關(guān)于這塊的（可能問題并不是...

    oysun 評論0 收藏0

  • 關(guān)于前后端分離與模板引擎

    摘要：但似乎他們的職責(zé)在以前甚至于現(xiàn)在都并不明確，雖然前端是跟瀏覽器打交道，但是最終瀏覽器拿到的頁面是服務(wù)器通過模板生成的一個臨時靜態(tài)頁面而已。當(dāng)然，一般傳統(tǒng)上的開發(fā)協(xié)作模式有兩種一種是前端先寫一個靜態(tài)頁面，寫好后，讓后端去套模板。隨著不同終端（Pad/Mobile/PC)的興起，對開發(fā)人員的要求越來越高，純?yōu)g覽器端的響應(yīng)式已經(jīng)不能滿足用戶體驗的高要求，往往需要針對不同的終端開發(fā)定制的版本，為了提...

    cnTomato 評論0 收藏0

  • 前端框架模式的變遷

    摘要：現(xiàn)在在前端的框架都是的模式，還有像和之類的變種獨特的單向數(shù)據(jù)流框架。只要將數(shù)據(jù)流進(jìn)行規(guī)范，那么原來的模式還是大有可為的。我們可以來看一下，框架的圖示從圖中，我們可以看到形成了一條到，再到，之后是的，一條單向數(shù)據(jù)流。 前言 前端框架的變遷，體系架構(gòu)的完善，使得我們只知道框架，卻不明白它背后的道理。我們應(yīng)該抱著一顆好奇心，在探索框架模式的變遷過程中，體會前人的一些理解和思考 本篇將講述的是...

    ssshooter 評論0 收藏0

  • 基于Ajax技術(shù)的前后端Json數(shù)據(jù)交互方式實現(xiàn)

    摘要：不過這種方式只能訪問靜態(tài)的頁面，無法與后端數(shù)據(jù)庫進(jìn)行交互。既然用戶需要通過前端實時與后端數(shù)據(jù)庫進(jìn)行交互，那么網(wǎng)頁也需要動態(tài)的更新，如果每次更新一個數(shù)據(jù)都通過重新獲取文件的方式來實現(xiàn)勢必會導(dǎo)致網(wǎng)絡(luò)負(fù)荷加重，頁面加載遲緩。 前言 使用瀏覽器訪問網(wǎng)站是日常生活中必不可少的一件事情，當(dāng)我們在瀏覽器地址欄中輸入網(wǎng)址后會看到網(wǎng)站的內(nèi)容，那么這個過程中發(fā)生了什么?下面簡單介紹下瀏覽器訪問網(wǎng)站過程。 ...

    fengxiuping 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<