jQuery 表單序列化實例程式碼-js教程-PHP中文網

首頁

web前端

js教程

jQuery 表單序列化實例程式碼

巴扎黑

Jun 21, 2017 pm 04:34 PM

jquery 程式碼實例序列化表單

這篇文章主要介紹了jQuery 表單序列化實例程式碼,需要的朋友可以參考下

廢話不多說了，直接給大家貼程式碼了，具體程式碼如下所述：

$(function(){
  $(&#39;#send&#39;).click(function(){
     $.ajax({
       type: "GET",
       url: "test.json",
       data: {username:$("#username").val(), password:$("#password").val()}, // 参数为对象
       dataType: "json",
       success: function(data){
          // code...   
       }
     });
  });
});
$(function(){
  $(&#39;#send&#39;).click(function(){
    var username = $("#username").val();
    var password = $("#password").val();
    $.ajax({
      type: "GET",
      url: "test.json",
      data: "username"+username+"&password"+password, // 参数为字符串拼接，并用&连接
      dataType: "json",
      success: function(data){
        // code...
      }
    });
  });
});

登入後複製

以上是一段常規的ajax請求程式碼，其中分別列舉了data參數的兩種傳遞格式。

為了簡單ajax請求時的data參數獲取，jquery定義了幾個快速的方法。

1.serialize()

　　用法：var data = $("form").serialize();

　　傳回值：將表單內容序列化成一個字串。

　　這樣在ajax提交表單資料時，就不用一一列舉出每一個參數。只需將data參數設定為 $("form").serialize() 即可。

其核心方法為$.param()，用來對一個陣列或物件依照key/value進行序列化，

#var obj = {first:" one",last:"two"};
var str = $.param(obj);
console.log(str); // first=one&last=two

　　另外，使用serialize有個好處是自帶中文編譯處理。所以，推薦使用serialize。

2.serializeArray()

　　用法：var jsonData = $("form").serializeArray();

　　傳回值：將頁面表單序列化成一個JSON結構（鍵值對）的物件。

　　例如，[{"name":"lihui", "age":"20"},{...}] 取得資料為jsonData[index].name

#綜上：使用ajax提交表單資料時,data參數設定為$(form).serialize()或$(form).serializeArray()都可以。另外有些細節建議參考w3c。

最後補充一個完整實例。

html：

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <form id="demo">
    <input type="text" value="demo1" name="demo1">
    <input type="text" value="demo2" name="demo2">
    <input type="text" value="demo3" name="demo3">
    <input type="submit" value="提交" id="submit">
  </form>
</body>
</html>

登入後複製

JavaScript：

<script>
  // 别忘了引入jquery !!!
  $(function(){
    $("#submit").click(function(){
    // var data = $("form").serializeArray();
      var data = $("form").serialize();
      $.ajax({
        type:"GET",
        url:"1.php",
        data:data,
        dataType:"json",
        success:function(data){
          console.log(data);
        },
        error:function(xhr,error){
          console.log(error);
        }
      })
    })
  })
</script>

登入後複製

php 提醒：需要配置php環境並開啟伺服器

<?php 
   echo json_encode($_GET);
 ?>

登入後複製

以上是jQuery 表單序列化實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7870

Java教學

1649

CakePHP 教程

1407

Laravel 教程

1301

PHP教程

1244

Related knowledge

GE通用遠端程式碼可在任何裝置上編程 Mar 02, 2024 pm 01:58 PM

如果您需要遠端編程任何設備，這篇文章會為您帶來幫助。我們將分享編程任何設備的頂級GE通用遠端代碼。通用電氣的遙控器是什麼？ GEUniversalRemote是一款遙控器，可用於控制多個設備，如智慧電視、LG、Vizio、索尼、藍光、DVD、DVR、Roku、AppleTV、串流媒體播放器等。 GEUniversal遙控器有各種型號，具有不同的功能和功能。 GEUniversalRemote最多可以控制四台設備。頂級通用遙控器代碼，可在任何裝置上編程GE遙控器配備一組代碼，使其能夠與不同設備配合。您可

如何使用Copilot產生程式碼 Mar 23, 2024 am 10:41 AM

身為一名程式設計師，對於能夠簡化程式設計體驗的工具，我感到非常興奮。借助人工智慧工具的幫助，我們可以產生演示程式碼，並根據需求進行必要的修改。在VisualStudioCode中新引入的Copilot工具讓我們能夠創建具有自然語言聊天互動的AI生成程式碼。透過解釋功能，我們可以更好地理解現有程式碼的含義。如何使用Copilot產生程式碼？要開始，我們首先需要取得最新的PowerPlatformTools擴充。要實現這一點，你需要進入擴充頁面，搜尋“PowerPlatformTool”，然後點擊Install按鈕

建立並執行Linux'.a”文件 Mar 20, 2024 pm 04:46 PM

在Linux作業系統中處理檔案需要使用各種命令和技術，使開發人員能夠有效率地建立和執行檔案、程式碼、程式、腳本和其他東西。在Linux環境中，擴展名為”.a”的檔案作為靜態庫具有重要的重要性。這些程式庫在軟體開發中發揮重要作用，允許開發人員有效地管理和共享多個程式的公共功能。對於Linux環境中的有效軟體開發，了解如何建立和運行「.a」檔案至關重要。本文將介紹如何全面安裝和設定Linux「.a」文件，讓我們一起探索Linux「.a」文件的定義、用途、結構，以及建立和執行它的方法。什麼是L

清華大學與智譜AI重磅開源 GLM-4：掀起自然語言處理新革命 Jun 12, 2024 pm 08:38 PM

自2023年3月14日開始，ChatGLM-6B以來，GLM系列模型受到了廣泛的關注與認可。特別是在ChatGLM3-6B開源之後，開發者對智譜AI推出的第四代模型充滿了期待。而這項期待，隨著GLM-4-9B的發布，終於得到了充分的滿足。 GLM-4-9B的誕生為了賦予小模型（10B及以下）更加強大的能力，GLM技術團隊經過近半年的探索，推出了這款全新的第四代GLM系列開源模型：GLM-4-9B。這一模型在確保精度的同時，大幅度壓縮了模型大小，具有更快的推理速度和更高的效率。 GLM技術團隊的探索沒

一句話打造Agent！李彥宏：人人都是開發者的時代到來 Apr 17, 2024 pm 02:28 PM

大模型顛覆一切，終於還是顛覆了本小編頭上。還是一句話就被打造出來的Agent。像這樣，丟給Ta一篇文章，不到1秒，標題建議就新鮮出爐了。這效率，比起本人類，只能說是一個快如閃電一個慢如樹懶吧…更難頂的是，創造這個Agent，真的就是幾分鐘的事。 Prompt是醬嬸的：而且，如果你也想體驗這種顛覆一切的feel，現在，基於這個百度剛剛上新的文心智能體平台，人人都能免費打造屬於自己的智能助手。可以利用搜尋引擎、智慧硬體平台、語音辨識、地圖、汽車等百度行動生態管道，讓更多人運用上你的創意！李彥宏本人

Mistral 開源程式碼模型奪得王座！ Codestral瘋狂訓練超80種語言，國內通義開發者請求出戰！ Jun 08, 2024 pm 09:55 PM

出品|51CTO技術棧（微訊號：blog51cto）Mistral發布了首個程式碼模型Codestral-22B！該模型的瘋狂之處不僅在於訓練了80多種程式語言，包括許多程式碼模型忽略的Swift等。他們的速度沒有完全一致。要求使用Go語言編寫一個「發布/訂閱」系統。這裡的GPT-4o正在輸出，Codestral已經快到看不清楚的速度交捲了！由於該模型剛剛推出，尚未公開測試。但根據Mistral的負責人說法，Codestral是目前表現最佳的開源程式碼模型。圖片有興趣的朋友可以移步：-抱抱臉：https

Laravel表單類別使用技巧：提高效率的方法 Mar 11, 2024 pm 12:51 PM

在編寫網站或應用程式時，表單是不可或缺的一部分。 Laravel作為一個流行的PHP框架，提供了豐富而強大的表單類，使得表單處理變得更加簡單和高效。本文將介紹一些Laravel表單類別的使用技巧，幫助你提升開發效率。下面透過具體的程式碼範例來詳細講解。建立表單要在Laravel中建立表單，首先需要在檢視中編寫對應的HTML表單。在處理表單時，可以使用Laravel