關於ajax非同步請求的一個細節問題

来源:https://www.cnblogs.com/chamujun/archive/2019/08/05/chamujun.html
-Advertisement-
Play Games

在使用ajax發送非同步請求時,遇到一個問題,就是在回調函數中接受到了非同步響應的數據,但是在前端頁面中的表單中卻不回顯該數據。 前端頁面在 第一次載入數據的同時 發送非同步請求,但是 這個 非同步響應 是在 頁面載入完數據之後 到達的,因此在 非同步響應 到達之後(這時表單數據已載入完畢) 需要第二次將數... ...


首先描述一下問題場景:我們正在做一個汽車出租項目,使用maven+ssm+easyui來完成,這個問題是在做汽車辦理出租業務的時候出現的。

問題描述:在使用ajax發送非同步請求時,遇到一個問題,就是在回調函數中接受到了非同步響應的數據,但是在前端頁面中的表單中卻不回顯該數據。

下麵請看問題代碼

 1 /* 辦理出租業務 */
 2         function rentCars(value){
 3             /* 獲取選中的行 */
 4             var row = $("#dgCarRents").datagrid("getSelected");
 5             if(row){
 6                 url="saveRents";
 7                 /* 清空表單數據 */
 8                 $("#fm").form('clear');
 9                 /* 禁止在下麵這些文本框中輸入 */
10                 $("#rentid").textbox('textbox').attr('readonly',true);
11                 $("#price").textbox('textbox').attr('readonly',true);
12                 $("#ident").textbox('textbox').attr('readonly',true);
13                 $("#carnumber").textbox('textbox').attr('readonly',true);
14                 $("#opername").textbox('textbox').attr('readonly',true);
15                 /* 非同步提交到後臺,獲取數據 */
16                 $.post('genRentCode',function(data){
17                     /* 將數據載入至form表單 */
18                     /* $("#fm").form('load',data); */
19                     row['rentid']=data.rentid;
20                     row['opername']=data.opername;
21                     /* $("#fm").form('load',row); */
22                 });
23                 /* 將身份證號放到row中 */
24                 row['identity']=$("#identity").val();
25                 /* 打開對話框 */
26                 $("#dlgRentCar").dialog('open').dialog('setTitle','辦理出租');
27                 /* 將json對象row中的數據載入至表單 */
28                 $("#fm").form('load',row);
29             }
30         }

請註意這裡:

前端頁面顯示:

發現就只有identity所對應的數據顯示了,而opername和rentid所對應的數據都沒有顯示,可是我明明已經在函數的最後一行將json對象row中的所有數據全部都載入到表單中了,但是表單為什麼沒有顯示呢?帶著這個問題,我試了一下老師的方法:

註意:這裡直接將後臺數據直接載入至表單時,非同步響應回來的json對象data的鍵(key)值一定要與表單中文本框的name屬性所對應的值一樣,否則數據載入不到表單中。

前端頁面:

rentid和opername全部都載入出來了。

問題解析:1.一開始,我的回調函數中,只有往json對象中賦值的語句;2.在回調函數中沒有往表單中載入數據的代碼;3.我發送的是非同步請求,那也就是說,對話框中的表單,是在非同步響應到達之前,將數據回顯的。

得出結論:在非同步響應到達之後(在這個案例中,非同步響應是在 表單回顯完數據之後 到達的),需要將數據再次載入到form表單中。

如果還不理解,那麼除了上述寫法之外還可以這樣寫:

這個方法也是可以的,看到了吧,老師是直接將非同步響應回來的數據載入到表單的所以不會出現問題,而我居然想試圖通過賦值的方法將數據載入到表單,但是卻不在回調函數中加入將非同步響應回來的數據載入至表單的代碼,而是只有賦值到json對象的語句,雖然我在最後將非同步響應回來的數據載入至表單,但是這樣導致的結果就是:對話框中的表單隻載入了非非同步響應回來的數據,而非同步響應回來的數據因為是非同步的,所以在表單回顯完數據之後,非同步響應回來的數據才發送到前端,json對象row才接受到賦值,此時如果沒有再次將數據載入至表單,那麼表單中就會沒有這非同步響應回來的數據。

再次總結一下前端獲取數據的過程:前端頁面在 第一次載入數據的同時 發送非同步請求,但是 這個 非同步響應 是在 頁面載入完數據之後 到達的,因此在 非同步響應 到達之後(這時表單數據已載入完畢)  需要第二次將數據載入到表單中(將 非同步響應回來的數據 載入至表單)

 


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

-Advertisement-
Play Games
更多相關文章
  • 1. javascript的typeof返回哪些數據類型. 答案:string,boolean,number,undefined,function,object 2. 例舉3種強制類型轉換和2種隱式類型轉換? 答案:強制(parseInt,parseFloat,number) 隱式(== ) 3. ...
  • 深度優先遍歷(Depth-First-Search),是搜索演算法的一種,它沿著樹的深度遍歷樹的節點,儘可能深地搜索樹的分支。當節點v的所有邊都已被探尋過,將回溯到發現節點v的那條邊的起始節點。這一過程一直進行到已探尋源節點到其他所有節點為止,如果還有未被髮現的節點,則選擇其中一個未被髮現的節點為源節... ...
  • 1、新的html5文件類型,僅需申明在html的第一行,即 <!DOCTYPE html> 2、圖形元素 figure ,將<figure>與<figcaption>相結合,使圖片標題與圖片相搭配 3、不需要為鏈接和腳本標簽添加類型的屬性 4、h5中不需要用引號將屬性包裹起來 5、使得內容可編輯。" ...
  • 再不學React就真的跟不上大前端的形式了,目前幾乎所有前端的招聘條件都是精通React者優先,看看拉勾網的React薪資,都是15K-20K,這個暑假,必須動起來了。 ...
  • 來自:https://www.cnblogs.com/myfirstboke/p/9150809.html 侵刪 ...
  • 第一章 JavaScript基礎 --1、JavaScript是一種基於對象和事件驅動的,並具有安全性能的腳本語言。--2、JavaScript的特點: -1、JavaScript主要用來在HTML頁面中添加交互行為 -2、JavaScript是一種腳本語言,語法和Java類似 -3、JavaScr ...
  • 08.05自我總結 一.顯示方式 1.display 常用的三種方式 2.vertical align 文本垂直對齊方式: |` top bottom` ...
  • 想瞭解原型和原型鏈,我覺得首先我們得知道javascript里有一個Object 與 Function,它倆都是構造函數,當然函數也是一個對象。我們列印Object 與 Function看一下, 那麼這個Object 與 Function 之間有何關係與區別呢?首先您只需要記住: 1. 所有普通對象 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...