ajax使用中發現的問題與深入擴展(for迴圈中嵌套ajax)

来源:http://www.cnblogs.com/niuchunlei/archive/2016/10/24/5992856.html
-Advertisement-
Play Games

在學習ajax的過程中,我曾經遇到過這樣的一個問題,為了得到一個詳情列表,我要先向伺服器去請求得到索引表,簡單描述就是ajax中的success中的for迴圈中再次嵌套了ajax,結果第二層success中的ajax的success並不能取得上層ajax的success中的值。 我先使用ajax發送 ...


在學習ajax的過程中,我曾經遇到過這樣的一個問題,為了得到一個詳情列表,我要先向伺服器去請求得到索引表,簡單描述就是ajax中的success中的for迴圈中再次嵌套了ajax,結果第二層success中的ajax的success並不能取得上層ajax的success中的值。

我先使用ajax發送請求獲得索引表,再使用for迴圈去依次使用索引目錄去獲得詳情列表中想要的數據。當時因為水平有限,用了一個最不合理的方式,於是產生了這麼一個莫名其妙的問題。

但是很奇怪的是每次傳入的參數都是undefined,糾結了好久,發現自己的整體思路和代碼並沒有錯誤,於是回到ajax的特性上來,忽然一拍腦袋,ajax請求也是事件呢,因此又牽扯到JavaScript中的單線程問題,於是我先把傳遞數據的下標-1(因為事件排隊,for迴圈已經執行完畢,所以for迴圈中的最後的數據下標已經越界),果然取得的所有數據都是最後一位,證實了我的想法。

首先,我很單純的設置了一個全局變數,使用全局變數去保存每次取得的值,但是馬上否定了自己,因為這並沒有什麼意義,因為等ajax事件執行的時候這個全局變數已經又是最後一個值了。

然後我又用了一個自認為比較巧妙的辦法,在第二層ajax請求中把想傳給下層的ajax的success回調函數的值放在請求數據里,在伺服器端的php頁面中,把我傳入的值再封裝到原來要傳入到第二個ajax的json數據中。當然,按照預想實現了想要的結果,後來又想了想,如果應用同樣的道理,把數據存入sessionStorage或者cookie未嘗不可。

但是很快否定了自己的這個想法,因為這樣確實解決了問題,當時還是很高興的,但是回頭一想,這樣不也是多此一舉嗎?把數據傳入伺服器再傳入客戶端,只是為了兩個回調函數之間的數據傳輸根本划不來。如果伺服器不需要向客戶端傳輸數據了呢?這個數據已經沒地方可以附加,更不可能給它單寫一個方法來接收這個數據。而且本身就是一種風險和開銷。因此使用把數據傳入伺服器再傳回客戶端實現兩個回調函數之間的數據傳輸並不是一個明智的方法(但是我還是不否定可能將來會有它發揮作用的時候)。存入session來完成兩個回調函數之間的傳參怎麼都讓人有一種特別滑稽的感覺。

後來想了想這個邏輯,如果從for迴圈來講,我的問題是for迴圈中的事件會排隊,參數不能按照預想傳遞。如果我把第二層的ajax代碼段封裝到一個函數中呢?每次迴圈都調用函數並且給函數傳參,使用函數中的參數來保存每次想要傳下去的值,發現問題確實簡簡單單的解決了。

然而過了並不是很久,我仔細想了想, 因為這兩次的ajax非同步請求是綁定在一起的,是為了去查詢兩個表中的數據,如果使用兩次ajax去請求資源是不是本身就有問題?為什麼不能合併成一起?於是我修改了自己的php文件結構,在伺服器端先查詢一次索引表,再通過迴圈去資料庫查詢詳情表。把結果拼接成自己想要的json數據一次打包傳回來。

在後面的學習中,我突然意識到資料庫語句本身就很強大,如果兩個表有關係是否可以一次查詢呢?好像大學里的知識印象冒出來了一點,然後去補了一下下資料庫的知識(資料庫並不是很好,只能完成基本的增刪改查QAQ),原來在伺服器端的資料庫中使用多表查詢就可以完全解決這個問題。好吧,問題至此解決(至少目前)。

雖然一個簡單的問題讓我繞了一圈才得以完美的解決,但是在初學的路上,我覺得應該學到的更多的是思維的方法,解決問題的方式,舉一反三的能力。很感謝在諸多問題困撓的情況下自己還能這麼的去想去鑽研一下問題,驗證一些想法。將來可能覺得現在所有的問題都那麼幼稚,但是我相信,在這條漫漫的成長之路上,等某天回顧的時候,風景會是很美的


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 哇,這個可以輕鬆實現輸入值就按鈕可點擊,輸入框沒有值則不可點擊的狀態呀 看代碼 so easy~~~這個功能實現的,就是比如像就是提交表單的時候的需求,就是要是你的輸入框沒有值,那個按鈕就disabled狀態~~~ ...
  • 橋接模式 1.在系統沿著多個維度變化的同時,又不增加其複雜度並以達到解耦 2.最主要特點:將實現層(如元素綁定的事件)與抽象層(如修飾頁面UI邏輯)解耦分離,使兩部分獨立變化 3.避免需求的改變造成對象內部的修改,體現了面向對象對拓展的開發及修改的關閉原則 demo實例:創建一個對象橋接method ...
  • 接下來是apply的用法與理解 代碼大多是網上找的資料,然後自己隨手做了一下小改動,測試通過,便於自己理解-w- 便於理解的格式: 父類.call(子類); 父類.apply(子類,arguments); 和C#相反: class 子類 : 父類 { ... } ...
  • dataset--自定義屬性 HTMLElement.dataset data-*屬性集 元素上保存數據 liujl div.dataset. 屬性名 值 id “123456” accountName “liujl” name “劉江龍” email “[email protected]” mobi... ...
  • ...
  • 在逛別人的博客的時候,看見別人的代碼的例子使用了高亮的語法,無論是java,js還是php等等語言,都會自動的對關鍵字進行高亮。 於是在前幾天自己寫了一個博客,遇到code時,自然就想到了別人網站如何漂亮,巴拉巴拉。 開始了正式的搗鼓。 在搗鼓之前去別的網站看了看。這裡貼上簡書的效果: 其中的關鍵字 ...
  • 總有人問我面試時候原型鏈怎麼寫, 作為一位職場老司機,面試界的白神。身經百戰,擼出以下的代碼 怎麼樣,看懂的是不是覺得以上的代碼清新脫俗,煥然一新 沒看懂的,在這裡解釋下 首先我定義了interviewer(面試官)和handsome (英俊)2個函數。 然後給他們2個的原型加了點東西,當然主要是h ...
  • 圖片預覽的 javascript 本地操作 早期瀏覽器,不能將本地圖片作為頁面元素處理,要實現圖片預覽需要將圖片先上傳到伺服器,再從伺服器取得進行預覽 現代的瀏覽器功能越來越全面,因此可以實現對一些數據的本地處理 Chrome MsEdge(ie11) Firefox 上圖的html ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...