1. 程式人生 > >關於form表單提交與ajax提交的區別

關於form表單提交與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提交時,卻是根據你的表單結構自動完成,不需要程式碼干預;


在用easyui時,提交方式有一個
<li class="L0"><span class="kwd">function</span><span class="pln"> submitForm</span><span class="pun">(){</span></li><li class="L1"><span class="pln">            $</span><span class="pun">(</span><span class="str">'#ff'</span><span class="pun">).</span><span class="pln">form</span><span class="pun">(</span><span class="str">'submit'</span><span class="pun">);</span></li><li class="L2"><span class="pln"></span><span class="pun">}</span></li>
用這種方式提交依然是ajax提交,在spring-controller裡面返回的字串是以資料的形式返回,因此不能跳轉頁面。

所以只能用document.getElementById("").submit();的方式提交才是表單的提交方式。

相關推薦

關於form中使用ajax提交ajax無法success的問題

問題背景:我的畢業設計是重構自己以前寫過的一個小網站,之前寫的時候沒有用任何框架,前後臺互動資料靠el表示式、form表單。在完成畢業設計時使用SpringMVC+Spring+MyBatis+JQuery,統一使用ajax來互動資料。 問題再現: html關鍵程式碼<

form提交ajax提交區別

原文地址:https://blog.csdn.net/yao302789/article/details/50954902 Ajax提交是通過js來提交請求,請求與響應均由js引擎來處理,頁面不會重新整理,用 戶感覺不到實際上瀏覽器發出了請求。比如說我們希望網頁總是顯示最新的新聞, 而又不想老是

關於form提交ajax提交區別

 1.    為什麼用AJAX?    使用AJAX,使用者對Web的體驗會更“敏捷”:資料提交頁面不會閃屏;頁面區域性    更新速度快;網路頻寬佔用低。  2.    AJAX開發相較傳統模式的簡單之處:    傳統模式下,表單提交則整個頁面重繪,為了維持頁面使用者對錶單的狀態改     變,要多些不少

form提交 ajax提交區別

1、使用場景: 安全性都一樣,都是傳送的http協議。安全性與提交檔案的業務處理(格式檢測,防注入)有關,與提交方式無關。 一般登入用表單提交,點選提交觸發submit事件,一般會 使頁面發生跳轉,頁面的跳轉等行為的控制往往在後端,後端控制頁面的跳轉及資料的傳遞

使用ajax提交form,包括ajax文件上傳 轉http://www.cnblogs.com/zhuxiaojie/p/4783939.html

ima option img jquery選擇器 open request resp logs ges 使用ajax提交form表單,包括ajax文件上傳 前言 使用ajax請求數據,很多人都會,比如說: $.post(path,{data:data},function

提交form---修改密碼 ajax、jQuery

改密 func 表單 eset password servlet 驗證 確認密碼 密碼 <form id ="password" method="post">   <table > <tr>   <td>原密碼:<

使用ajax提交form,包括ajax文件上傳

開發者 使用 sub 決定 發現 cli 也會 pos pre 前言使用ajax請求數據,很多人都會,比如說:$.post(path,{data:data},function(data){ ...},"json");又或者是這樣的ajax$.ajax({

ajax提交form,包括ajax檔案上傳

使用ajax請求資料,很多人都會,比如說: $.post(path,{data:data},function(data){ ... },"json"); 又或者是這樣的ajax $.ajax({ url:"${pageCont

Thymeleaf的普通提交AJAX提交

為Java實體物件新增後臺校驗註解: //String型別的校驗: @NotEmpty -- 不能為空 max=16 -- 最大長度為16 @NotEmpty(message = "songName不能為空") @Size(ma

使用ajax提交form,包括ajax檔案上傳

前言 使用ajax請求資料,很多人都會,比如說: $.post(path,{data:data},function(data){ ... },"json"); 又或者是這樣的ajax $.ajax({ url:"${pageContext.re

【轉載】form的兩種提交方式,submit和button的用法

按鈕 type ssid login false tex .get ons 轉載 1.當輸入用戶名和密碼為空的時候,需要判斷。這時候就用到了校驗用戶名和密碼,這個需要在jsp的前端頁面寫;有兩種方法,一種是用submit提交。一種是用button提交。方法一:在jsp的前端

form多選框提交數據 服務器只能接受到一個數據

表單提交 form 多選 提交過去後表單中name相同的值會被後一個覆蓋,而不會被單獨識別出來。在name名稱後面加上‘[]’即可;如 name=‘user[]‘ 註意下面兩個教程的區別,我很想知道w3c怎麽讀取到的。等待指教; http://www.w3school.com.cn/tags/at

Form的幾種提交方式

text ucc ram rip sub javascrip reg data 方式 <script type="text/javascript"> $(function() { //1、ajax提交 $("#ajaxBtn").click(function

ckeditor.js的使用/form序列化後提交

ckeditor.js的使用/form表單序列化後提交 <script src="../ckeditor/ckeditor.js"></script> <textarea cols="40" rows="5" id="editor" name="desc"

ajax實現上傳檔案和form上傳檔案的區別

在使用form表單的時候,一旦點選提交觸發submit事件,一般會使得頁面跳轉,頁面間的跳轉等行為的控制權往往在後端,後端會控制頁面的跳轉及資料傳遞,但是在某些時候不希望頁面跳轉,或者說想要將控制權放在前端,通過js來操作頁面的跳轉或者資料變化。 一般這種非同步的操作,我們

form的兩種提交方式,submit和button的用法

1.當輸入使用者名稱和密碼為空的時候,需要判斷。這時候就用到了校驗使用者名稱和密碼,這個需要在jsp的前端頁面寫;有兩種方法,一種是用submit提交。一種是用button提交。 方法一: 在jsp的前端頁面的頭部插入一個js方法:  function checkUser(

js構建form 以post方式提交 一般用於匯出檔案

 js構建form表單  以post方式提交   一般用於匯出檔案 傳遞引數: var parms = {   "key1":"value1",   "key1":"value2" } /**  * 構建form表單,以post方式提交  * @param actio

js-form資料轉為json提交

JSON.stringify($('#categoryForm').serializeObject() /** * 自動將form表單封裝成json物件 */ $.fn.serializeObject = function() {

input提交按鈕在form外面還要起到提交資訊作用

<div class="loginCenter">     <div class="innerWrapper">         <div class="login">             <p>使用者登入</p&g

Form的6種提交方式

1.無重新整理頁面提交表單 表單可實現無重新整理頁面提交,無需頁面跳轉,如下,通過一個隱藏的iframe實現,form表單的target設定為iframe的name名稱,form提交目標位當前頁面if