前端模擬后台json 調接口


 

前言:作為前端必不可少的是與后台交互,當前端頁面寫好,后台接口還沒開發好的時候,前端自己寫json數據,模擬

后台交互,不失為一種好方法,更為重要的一點是,使用json假數據模擬接口調用,前端和后台算是某種程度的一種分離,不在是后台寫好接口,

前端調用中出現問題,再交給后台去修改,后台修改好交給前台用,這樣無疑造成了,前后台反復打磨的時間浪費。

前台使用json數據模擬后台接口,不是模擬后台接口的功能實現,而是模擬兩種狀態,所有真正的接口調用最后無疑兩種狀態成功或者失敗

在模擬的過程中,前端要考慮的是成功情況下前端要做什么事情,失敗情況下前端又要做什么事情,如果某些接口需要給后台傳遞參數,那么此時前端可以自己在

需要傳參的data里寫上符合條件的參數,(參數可以寫成固定的)

tips:如果在引用json文件的時候報404錯誤,不妨嘗試把url路徑寫成絕對路徑。 

例子:目錄結構:

 json格式要正確,外面記得{}包裹

cs.json:

{
    "list":[
        {
        "id":1,
        "name":"張三"
        },{
        "id":2,
        "name":"李四"
        }
    ]
}

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <p></p>
    </body>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $.ajax({
              url: "js/cs.json", 
              data: {
          //id:"101" 如果需要傳參,可以寫成固定值的來模擬
         }, method:
"get",//模擬json,使用get請求,正式請求換成實際接口的post、get等 header: { 'content-type': 'application/json' // 默認值 }, success(res) { console.log(res) } }) }) </script> </html>

打印結果:上圖console.log(res)的打印

 

然后在success方法里,寫自己成功后的操作

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM