1. <i id="s6b2k"><small id="s6b2k"></small></i>
    <b id="s6b2k"><bdo id="s6b2k"></bdo></b>
  2. <wbr id="s6b2k"></wbr>

    利用promise及參數解構封裝ajax請求的方法_AJAX相關

    來源:腳本之家  責任編輯:小易  

    1.前端代碼

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
    </head>
    <body>
     <script>
     /**
      * type: get/post
      * url: http://localhost:3000 http://localhost:3000/details http://localhost:3000/users
      * data: lid=5 / uname=lili&upwd=123456
      * dataType: '' / 'json', 如果服務端返回的是json格式字符串,就通過dataType通知ajax函數自動轉換為對象
      * **/
     ajax({
      type: 'get',
      url: 'http://localhost:3000',
      dataType: 'json'
     })
     // data 不寫在解構時值默認為 data: undefined
     ajax({
      type: 'get',
      url: 'http://localhost:3000/details',
      data: 'lid=0',
      dataType: 'json'
     })
     ajax({
      type: 'post', 
      url: 'http://localhost:3000/users', 
      data: 'uname=lili&upwd=123456',
     }).then(function(res){
      alert(res)
     })
     // dataType 不寫在解構時值默認為 dataType: undefined
    
     function ajax({type, url,data, dataType}){
      return new Promise(function(open){
      var xhr = new XMLHttpRequest()
      xhr.onreadystatechange = function(){
       if(xhr.readyState === 4 && xhr.status === 200){
       if(dataType === 'json'){
        var res = JSON.parse(xhr.responseText)
       }else{
        var res = xhr.responseText
       }
       console.log(res)
       open(res)
       }
      }
    
      if(type === 'get' && data !== undefined){
       url += `?${data}`
      }
      xhr.open(type, url, true)
      xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    
      if(type === 'get'){
       xhr.send()
      }else{
       xhr.send(data)
      }
      })
     }
     </script>
    </body>
    </html>

    另:ajax實際代碼實現如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
    </head>
    <body>
     <script>
     var xhr = new XMLHttpRequest()
     xhr.onreadystatechange = function(){
      if(xhr.readyState === 4 && xhr.status === 200){
      console.log(xhr.responseText)
      }
     }
     xhr.open('get', 'http://localhost:3000', true)
     xhr.send()
     </script>
    </body>
    </html>

    2.后端代碼

    1) 創建一個后端項目

    在這里插入圖片描述

    2) 在routes下創建index.js,users.js,代碼如下

    // index.js
    var express = require('express');
    var router = express.Router();
    
    /* GET home page. */
    var products = [
     {
     lid:1,
     pname:'筆記本',
     price:3400
     },
     {
     lid:2,
     pname:'手機',
     price:5400
     },
     {
     lid:3,
     pname:'iPad',
     price:6400
     }
    ]
    
    router.get('/', function(req, res, next) {
     res.send(products)
    });
    
    router.get('/details', function(req, res, next){
     var lid = req.query.lid
     res.send(products[lid])
    })
    
    module.exports = router;
    // user.js
    var express = require('express');
    var router = express.Router();
    
    /* GET users listing. */
    router.post('/', function(req, res, next) {
     var uname = req.body.uname
     var upwd = req.body.upwd
     if(uname === 'lili' && upwd === '123456'){
     res.send('登陸成功')
     }else{
     res.send({
      code: 0,
      message: '用戶名或密碼錯誤'
     })
     }
    });
    
    module.exports = router;

    3.注:

    為避免跨域,可將前端代碼和后端同時放在一個項目內,使用同一地址,再發送請求調取接口

    到此這篇關于利用promise及參數解構封裝ajax請求的文章就介紹到這了,更多相關promise封裝ajax請求內容請搜索真格學網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持真格學網!

    您可能感興趣的文章:js使用Promise實現簡單的Ajax緩存用Promise解決多個異步Ajax請求導致的代碼嵌套問題(完美解決方案)

  3. 本文相關:
  4. 利用iframe實現ajax跨域通信的實現原理(圖解)
  5. 原生ajax瀑布流demo分享(必看篇)
  6. ajax 入門基礎之 xmlhttprequest對象總結
  7. ajax長連接項目案例
  8. ajax 數據庫中隨機讀取5條數據動態在頁面中刷新
  9. 用ajax讀取xml格式的數據
  10. ajax方式實現注冊功能(提交數據到后臺數據庫完成交互)
  11. ajax 緩存 問題 requestheader
  12. ie8用ajax訪問不能每次都刷新的問題
  13. layui ajax請求給下拉框賦值的實例
  14. 怎么將es6的Promise和Ajax封裝起來使用
  15. ajax為什么要promise封裝
  16. 原生ajax為什么要promise封裝?
  17. 怎么封裝一個公共的ajax請求
  18. 如何自己封裝一個ajax函數
  19. 利用AJAX技術在服務器和客戶端交互數據時,可通過...
  20. ajax異步請求獲取后臺數據,java mvc 后臺應該如何...
  21. js面向對象封裝ajax
  22. jquery ajax問題:當url中參數太多時,怎么用param...
  23. EXT中Ajax請求參數如何封裝成JAVA對象的?
  24. 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全javascriptasp.netphp編程ajax相關正則表達式asp編程jsp編程編程10000問css/htmlflex腳本加解密web2.0xml/rss網頁編輯器相關技巧安全相關網頁播放器其它綜合dart首頁js使用promise實現簡單的ajax緩存用promise解決多個異步ajax請求導致的代碼嵌套問題(完美解決方案)利用iframe實現ajax跨域通信的實現原理(圖解)原生ajax瀑布流demo分享(必看篇)ajax 入門基礎之 xmlhttprequest對象總結ajax長連接項目案例ajax 數據庫中隨機讀取5條數據動態在頁面中刷新用ajax讀取xml格式的數據ajax方式實現注冊功能(提交數據到后臺數據庫完成交互)ajax 緩存 問題 requestheaderie8用ajax訪問不能每次都刷新的問題layui ajax請求給下拉框賦值的實例jquery ajax 向后臺傳遞數組參數ajax readystate的五種狀態詳解ajax中的async屬性值之同步和異步jquery實現ajax定時刷新局部頁面ajax傳遞多個參數具體實現ajax獲取數據中文亂碼問題最簡單jquery ajax中使用serialize()方ajax獲取數據然后顯示在頁面的實自己動手打造ajax圖片上傳(網上沒ajax 緩存問題的兩種解決方法(ieajax實現點擊不同的鏈接讓返回的內容顯示ajax局部刷新一個div下jsp內容的方法ajax 把拿到的后臺數據在頁面中渲染的實例ajax的json傳值方式在jsp頁面中的應用ajax校驗是否重復的實現代碼解決ajax返回驗證的時候總是彈出error錯誤通過ajax方式上傳文件使用formdata進行ajajax技術制作得在線歌詞搜索功能ajax引擎 ajax請求步驟詳細代碼asp簡單的ajax留言板
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.yu113.com All Rights Reserved
    战天txt全集下载