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

kumfo 發布于2019-08-22 10:41 / 1235人閱讀

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

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

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

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

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

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

LN:

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

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

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

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

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

GPU云服務器云服務器 webrtc前后端交互 java 前后交互 json數據前后交互 js前后臺數據交互

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91071.html

一種SPA（單頁面應用）架構

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

Codeing_ls 2019-08-21 12:23 評論0 收藏0
WEB程序的前后端數據交互流程

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

oysun 2019-06-28 13:45 評論0 收藏0
關于前后端分離與模板引擎

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

cnTomato 2019-04-23 13:40 評論0 收藏0
前端框架模式的變遷

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

ssshooter 2019-08-22 11:11 評論0 收藏0
基于Ajax技術的前后端Json數據交互方式實現

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

fengxiuping 2019-08-01 18:20 評論0 收藏0