首頁 web前端 js教程 form轉json實作方法

form轉json實作方法

Jan 26, 2018 am 09:46 AM
form javascript json

本文主要介紹了jQuery實現的form轉json功能,結合完整實例形式分析了jQuery將form表單資料封裝成json傳輸的具體步驟與相關操作技巧,需要的朋友可以參考下,希望能幫助到大家。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/javascript" src="js/jquery-2.0.3.js"></script>
<title>无标题文档</title>
<script type="application/javascript">
$.fn.serializeObject = function()
{
  var o = {};
  var a = this.serializeArray();
  $.each(a, function() {
    if (o[this.name]) {
      if (!o[this.name].push) {
        o[this.name] = [o[this.name]];
      }
      o[this.name].push(this.value || &#39;&#39;);
    } else {
      o[this.name] = this.value || &#39;&#39;;
    }
  });
  return o;
};
function onClik(){
    //var data = $("#form1").serializeArray(); //自动将form表单封装成json
    //alert(JSON.stringify(data));
    var jsonuserinfo = $(&#39;#form1&#39;).serializeObject();
    alert(JSON.stringify(jsonuserinfo));
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
 <p>进货人 :
  <label for="name"></label>
  <input type="text" name="name" id="name" />
 </p>
 <p>性别:
  <label for="sex"></label>
  <select name="sex" size="1" id="sex">
   <option value="1">男</option>
   <option value="2">女</option>
  </select>
 </p>
 <table width="708" border="1">
  <tr>
   <td width="185">商品名</td>
   <td width="205">商品数量</td>
   <td width="296">商品价格</td>
  </tr>
  <tr>
   <td><label for="pro_name"></label>
    <input type="text" name="pro_name" id="pro_name" /></td>
   <td><label for="pro_num"></label>
    <input type="text" name="pro_num" id="pro_num" /></td>
   <td><label for="pro_price"></label>
    <input type="text" name="pro_price" id="pro_price" /></td>
  </tr>
  <tr>
   <td><input type="text" name="pro_name2" id="pro_name2" /></td>
   <td><input type="text" name="pro_num2" id="pro_num2" /></td>
   <td><input type="text" name="pro_price2" id="pro_price2" /></td>
  </tr>
 </table>
 <p> </p>
 <input type="button" name="submit" onclick="onClik();" value="提交"/>
</form>
</body>
</html>
登入後複製

程式碼效果示範:

#相關推薦:

在Javascript操作JSON對象,增加刪除修改的簡單實作

JS將string字串轉為json物件的方法

jQuery各種遍歷陣列及json物件的實例程式碼總結

以上是form轉json實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡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脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

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

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

MySQL5.7和MySQL8.0的差別是什麼? MySQL5.7和MySQL8.0的差別是什麼? Feb 19, 2024 am 11:21 AM

MySQL5.7和MySQL8.0是兩個不同的MySQL資料庫版本,它們之間有以下一些主要差異:效能改進:MySQL8.0相對於MySQL5.7有一些效能改進。其中包括更好的查詢優化器、更有效率的查詢執行計劃產生、更好的索引演算法和平行查詢等。這些改進可以提高查詢效能和整體系統效能。 JSON支援:MySQL8.0引入了對JSON資料類型的原生支持,包括JSON資料的儲存、查詢和索引。這使得在MySQL中處理和操作JSON資料變得更加方便和有效率。事務特性:MySQL8.0引進了一些新的事務特性,如原子

PHP 數組轉 JSON 的效能最佳化技巧 PHP 數組轉 JSON 的效能最佳化技巧 May 04, 2024 pm 06:15 PM

PHP數組轉JSON的效能最佳化方法包括:使用JSON擴充和json_encode()函數;新增JSON_UNESCAPED_UNICODE選項以避免字元轉義;使用緩衝區提高循環編碼效能;快取JSON編碼結果;考慮使用第三方JSON編碼庫。

Pandas使用教學:讀取JSON檔案的快速入門 Pandas使用教學:讀取JSON檔案的快速入門 Jan 13, 2024 am 10:15 AM

快速入門:Pandas讀取JSON檔案的方法,需要具體程式碼範例引言:在資料分析和資料科學領域,Pandas是一個重要的Python庫之一。它提供了豐富的功能和靈活的資料結構,能夠方便地對各種資料進行處理和分析。在實際應用中,我們經常會遇到需要讀取JSON檔案的情況。本文將介紹如何使用Pandas來讀取JSON文件,並附上特定的程式碼範例。一、Pandas的安裝

Jackson庫中註解如何控制JSON序列化和反序列化? Jackson庫中註解如何控制JSON序列化和反序列化? May 06, 2024 pm 10:09 PM

Jackson庫中的註解可控制JSON序列化和反序列化:序列化:@JsonIgnore:忽略屬性@JsonProperty:指定名稱@JsonGetter:使用獲取方法@JsonSetter:使用設定方法反序列化:@JsonIgnoreProperties:忽略屬性@ JsonProperty:指定名稱@JsonCreator:使用建構子@JsonDeserialize:自訂邏輯

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

深入了解PHP:JSON Unicode轉中文的實作方法 深入了解PHP:JSON Unicode轉中文的實作方法 Mar 05, 2024 pm 02:48 PM

深入了解PHP:JSONUnicode轉中文的實作方法在開發中,我們經常會遇到需要處理JSON資料的情況,而JSON中的Unicode編碼在一些場景下會為我們帶來一些問題,特別是當需要將Unicode編碼轉換為中文字元時。在PHP中,有一些方法可以幫助我們實現這個轉換過程,以下將介紹常用的方法,並提供具體的程式碼範例。首先,讓我們先來了解一下JSON中Un

如何在JavaScript中取得HTTP狀態碼的簡單方法 如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP狀態碼取得方法簡介:在進行前端開發中,我們常常需要處理與後端介面的交互,而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法,並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時,服務

PHP 數組轉 JSON 的快捷技巧 PHP 數組轉 JSON 的快捷技巧 May 03, 2024 pm 06:33 PM

PHP陣列可透過json_encode()函數轉換為JSON字串(例如:$json=json_encode($array);),反之亦可用json_decode()函數從JSON轉換為陣列($array=json_decode($json);) 。其他技巧還包括:避免深度轉換、指定自訂選項以及使用第三方程式庫。

See all articles