2. 程式人生 > >Ajax請求與表單提交的區別

Ajax請求與表單提交的區別

阿新 • • 發佈：2019-01-15

Form表單提交

<form action="ajaxTest.json" method="post">
    <input type="text" name="username">
    <input type="password" name="password">
</form>

action指明要提交到的url,method為提交方法，為post或是get。如果方法為get，表單提交的資料會被寫在請求頭的URL裡（請求頭裡沒有Content-type欄位）；如果方法為post，資料會被儲存在請求體裡，請求頭的Content-type欄位的值是application/x-www-form-urlencoded。表單每次提交都會導致頁面重新整理。點選會提交表單內容的，有三個標籤：
<input type="submit"/>


<button type="submit"></button>
<input type="image">

Ajax請求

<html>
<head></head>
<body>
<script>
function createXHR() {
    if(typeof XMLHttpRequest != 'undefined') {
        return new XMLHttpRequest();
    } else if(typeof ActiveXObject != 'undefined'
 
) {
        if(typeof arguments.callee.activeXString != "string") {
            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
                i, len;

            for(i = 0, len = versions.length; i < len; i++) {
                try {
                    new ActiveXObject(versions[i]);
                    arguments
 
.callee.activeXString = versions[i];
                    break;
                } catch (ex) {
                    //跳過
                }
            }

            return new ActiveXObject(arguments.callee.activeXString);
        }
    } else {
        throw new Error("No XHR object available.");
    }
}

var xhr = createXHR();
var data = "username=Mary&password=123";
xhr.open("GET", "ajaxTest.json", true);
xhr.setRequestHeader("Content-type", "application/x-www.form-urlencoded");
xhr.send(data);
</script>
</body>
</html>

Ajax請求不會導致整個頁面重新整理，只會使區域性重新整理。使用Ajax必需要注意：資料必須是用&連線的鍵值對，並且在open()和send()之間必須要加xhr.setRequestHeader("Content-type", "application/x-www.form-urlencoded");這樣才能確保後臺可以通過request.getParameter("鍵名")來獲取資料。

相關推薦

Ajax請求與表單提交的區別

Form表單提交 <form action="ajaxTest.json" method="post"> <input type="text" name="username"> <input type="pas

轉載：關於ajax，form表單提交，http請求提交的區別

https://www.cnblogs.com/lidgblogs/archive/2017/09/01/7403828.htmlajax模仿form上傳：<!doctype html> <html lang="en"> <head>

Extjs6關於Ajax和form表單提交以及store請求session超時的處理方法

對於Store的處理 每個store配置的時候，配上load監聽，載入時處理： usrStore : { model : 'App.model.Usr', autoLoad :

Payload與form表單提交區別

最近做專案的時候，在通過post請求向服務端傳送資料的時候，請求失敗了。錯誤資訊如下：返回的400(bad request)錯誤，說明客戶端這邊傳送的請求是有問題的。和通過jquery中的ajax方法傳送的請求作對比。發現問題出在了請求的主體部分。這裡的請求主體部分是payload的形式的。 而直接通過jq,

關於ajax進行form表單提交進行非同步上傳裡面帶有檔案上傳的問題

<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title></title>  &

Ajax模仿form表單提交 以及jquery的param()方法

param() 方法用於在內部將元素值轉換為序列化的字串表示。請參閱 .serialize() 瞭解更多資訊。 對於 jQuery 1.3，如果傳遞的引數是一個函式，那麼用 .param() 會得到這個函式的返回值，而不是把這個函式作為一個字串來返回。 對於 jQuery 1.4，.param() 方

java post請求的表單提交和json提交簡單小結

在java實現http請求時有分為多種引數的傳遞方式，以下給出通過form表單提交和json提交的引數傳遞方式： 1 public String POST_FORM(String url, Map<String,String> map,String encoding) throws Pa

Ajax獲取form表單提交資料

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

AJAX和form表單提交的中文轉碼問題全面解決，encoderURL兩次轉碼的真相

{ if (window.XMLHttpRequest) {     myRequest =new XMLHttpRequest(); // Standards-compliant browsers }elseif (window.ActiveXObject) {     myRequest =new Act

spring mvc ajax請求form表單轉換成json

在使用jquery傳送ajax請求的時候，通過jquery的serialize()方法對錶單進行處理髮送到服務端是比較方便的。有一種場景是，欄位大部分在form表單下，個別欄位需要組裝，如果需要組裝的欄位比較簡單，可以使用serializeArray()將form序列化成ar

form表單提交與ajax提交的區別

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

Ajax提交與傳統表單提交的區別說明

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

關於form表單提交與ajax提交的區別

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

Ajax提交與傳統Form表單提交的區別說明

Ajax提交是通過js來提交請求，請求與響應均由js引擎來處理，頁面不會重新整理，使用者感覺不到實際上瀏覽器發出了請求。比如說我們希望網頁總是顯示最新的新聞，而又不想老是去點重新整理按鈕，我們就可以用Ajax機制來實現。網上的客服軟體也是ajax請求的一個比較好的案例。傳

form表單提交與 ajax提交的區別

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

AJAX實現圖片上傳和預覽（傳統ajax與jQuery AJAX；帶圖片的表單提交）

  一、通過Servlet3.0和傳統的AJAX實現圖片上傳和預覽          此方法也適用於帶圖片的表單提交         上傳時預覽圖片    

jquery在表單提交之前，給submit按鈕繫結ajax請求需要注意的細節

場景： 一般情況下，我們在一個form表單中新增很多資訊，在submit提交操作之前，我們有可能需要驗證一些必要的資訊，比如說：提交前，我們需要驗證當前註冊的賬戶名稱是否已經在資料庫中存在的情況，這個時候就需要在submit按鈕提交前繫結一個ajax非同步的click事件。

虛擬表單提交模擬ajax請求

前端開發人員經常會遇到ajax請求出現跨域問題，比如做單點登入。結合本人開發經驗推薦一方法——虛擬表單提交，解決此類問題。此方法的特點是簡單易懂！好了，直接上乾貨！ function formCommit(){ var formobj; // window.top.open(

Vue form 表單提交+ajax非同步請求+分頁

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi

Thymeleaf的普通表單提交與AJAX提交

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