首頁 web前端 js教程 Ajax提交與傳統表單提交的差異說明_javascript技巧

Ajax提交與傳統表單提交的差異說明_javascript技巧

May 16, 2016 pm 05:01 PM
表單提交

Ajax提交是透過js提交請求,請求與回應均由js引擎來處理,頁面不會刷新,使用者感覺不到實際上瀏覽器發出了請求。比如說我們希望網頁總是顯示最新的新聞,又不想老是去點刷新按鈕,我們就可以用Ajax機制來實現。網路上的客服軟體也是ajax請求的一個比較好的案例。傳統的請求頁面將實現刷新,因此局限性很大。

1.為什麼用AJAX?
使用AJAX,使用者對Web的體驗會更「敏捷」:資料提交頁面不會閃屏;頁局部更新速度快;網路頻寬佔用低。

2.AJAX開發相較傳統模式的簡單之處:
傳統模式下,表單提交則整個頁面重繪,為了維持頁面使用者對表單的狀態改變,要多些不少代碼。若要在控制器和範本之間傳遞更多參數以保持頁面狀態。而AJAX不然,因為頁面只是局部更新, 不關心也不會影響頁面其他部分的內容。

3.AJAX開發相較傳統模式的難度:
需要了解、精通JavaScript,而JavaScript則有除錯麻煩、瀏覽器相容性等許多障礙。

=================================

有下列幾種差異: 
1. Ajax在提交、請求、接收時,都是非同步請求進行的,網頁不需要刷新;Form提交則是新建一個頁面,哪怕是提交給自己本身的頁面,也是需要刷新的;

2. A在提交時,是在後台新建一個請求;F卻是放棄本頁面,而後再請求;

3. A必須要使用JS來實現,不啟用JS的瀏覽器,無法完成該操作;F卻是瀏覽器的本能,無論是否開啟JS,都可以提交表單; 4. A在提交、請求、接收時,整個過程都需要使用程式來對其資料進行處理;F提交時,卻是根據你的表單結構自動完成,不需要程式碼幹預。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

layui登陸頁怎麼設定跳轉 layui登陸頁怎麼設定跳轉 Apr 04, 2024 am 03:12 AM

layui 登入頁面跳轉設定步驟:新增跳轉代碼:在登入表單提交按鈕點選事件中新增判斷,成功登入後透過 window.location.href 跳到指定頁面。修改 form 配置:在 lay-filter="login" 的 form 元素中新增 hidden 輸入字段,name 為 "redirect",value 為目標頁面位址。

layui怎麼取得表單數據 layui怎麼取得表單數據 Apr 04, 2024 am 03:39 AM

layui 提供了多種取得表單資料的方法,包括直接取得表單所有欄位資料、取得單一表單元素值、使用formAPI.getVal() 方法取得指定欄位值、將表單資料序列化並作為AJAX 請求參數,以及監聽表單提交事件獲取資料。

layui怎麼實現前後端交互 layui怎麼實現前後端交互 Apr 01, 2024 pm 11:33 PM

使用 layui 進行前後端互動有以下方法:$.ajax 方法:簡化非同步 HTTP 請求。自訂請求物件:允許發送自訂請求。 Form 控制項:處理表單提交和資料驗證。 Upload 控制項:輕鬆實作檔案上傳。

vue中event和$event區別 vue中event和$event區別 May 08, 2024 pm 04:42 PM

Vue.js 中,event 為原生 JavaScript 事件,由瀏覽器觸發,而 $event 是 Vue 特定抽象事件對象,在 Vue 元件中使用。一般使用 $event 更方便,因為它經過格式化和增強,支援資料綁定。當需要存取原生事件物件特定功能時,使用 event。

Java中Serverlet的作用是什麼 Java中Serverlet的作用是什麼 Apr 12, 2024 pm 02:39 PM

Servlet 在 Java Web 應用程式中作為客戶端-伺服器通訊的橋樑,負責:處理客戶端請求;產生 HTTP 回應;動態產生 Web 內容;回應客戶互動;管理 HTTP 會話狀態;提供安全保護。

如何使用 PHP 建立單頁應用程式 如何使用 PHP 建立單頁應用程式 May 04, 2024 pm 06:21 PM

使用PHP建立單頁應用程式(SPA)的步驟:建立PHP文件,並載入Vue.js。定義Vue實例,並建立包含文字輸入和輸出文字的HTML介面。建立包含Vue組件的JavaScript框架檔案。將JavaScript框架檔案包含到PHP檔案中。

js中的dom是什麼的縮寫 js中的dom是什麼的縮寫 May 09, 2024 am 12:00 AM

DOM(文件物件模型)是用於存取、操作和修改HTML/XML 文件樹狀結構的API,它將文件表示為一個節點層次結構,包括Document、Element、Text 和Attribute 節點,可用於:存取和修改文件結構存取和修改元素樣式回應使用者互動建立/修改HTML 內容

html中form標籤的用法 html中form標籤的用法 Apr 27, 2024 pm 09:34 PM

form 標籤用於建立表單,允許使用者輸入資料並提交至伺服器端處理。屬性包括 action(處理程序 URL)、method(提交方式)、name(表單名稱)、target(提交目標)、enctype(資料編碼方式)。表單元素包括文字方塊、下拉清單、文字區域、按鈕等。提交表單會將資料透過指定方式和 URL 傳送至伺服器端。

See all articles