2. 程式人生 > >jQuery實現form表單序列化轉換為json對象功能示例

jQuery實現form表單序列化轉換為json對象功能示例

阿新 • • 發佈：2018-05-29
bubuko ret FN RR inpu info images serialize orm 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jquery form序列化轉換為json對象</title>
    <script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    </script>
  </head>
  <body>
    <form action="" name="post_form
 
" id="post_form">
      姓名：<input type="name" name="name" value="王">
      <br/>性別：<input type="radio" name="sex" value="男" checked>男<input type="radio" name="sex" value="女">女
      <br/>愛好：<input type="checkbox" name="loves" value="籃球" >籃球<input type="checkbox
 
" name="loves" value="足球">足球
      <br/>籍貫：<select name="province">
              <option value="上海">上海</option>
              <option value="北京">北京</option>
              <option value="深圳">深圳</option>
            </select>
    </form>
    <div id="
 
result" style="margin-top:20px;width:600px;height:100px;border:1px solid #f00;">
    </div>
    <div>
    <button id="send">發送</button>
    </div>
    <script>
    //jquery form序列化轉換為json對象
    (function($){
      $.fn.serializeJson=function(){
        var serializeObj={};
        var array=this.serializeArray();
        var str=this.serialize();
        $(array).each(function(){
          if(serializeObj[this.name]){
            if($.isArray(serializeObj[this.name])){
              serializeObj[this.name].push(this.value);
            }else{
              serializeObj[this.name]=[serializeObj[this.name],this.value];
            }
          }else{
            serializeObj[this.name]=this.value;
          }
        });
        return serializeObj;
      };
    })(jQuery);
    $(document).ready(function(){
      $("#send").click(function(){
        var post_data=$("#post_form").serializeJson();//表單序列化
        $("#result").html(JSON.stringify(post_data));
      })
    })
    </script>
  </body>
</html>

運行結果：

技術分享圖片

技術分享圖片

jQuery實現form表單序列化轉換為json對象功能示例

相關推薦

jQuery實現form表單序列化轉換為json對象功能示例

bubuko ret FN RR inpu info images serialize orm <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

原生js實現form表單序列化

defined json cnblogs 一個 break value 元素 default [0 大家都知道在jquery中有相應的表單序列化的方法： 1.serialize()方法 　　格式：var data = $("form").serialize(); 　　功能：

原生JavaScript實現form表單序列化的方法

當我們有form表單而且裡面的表單元素較多時，咱們總不能一個個去獲取表單元素內的值來進行拼接吧！這樣會很讓人蛋疼！為了方便與後臺互動並且提高自己的開發效率，並且不讓你蛋疼；我們一起用原生來寫一個表單序列化方法： 先介紹一下jquery中有相應的表單序列化的方法： 1.serializ

angularjs $http事務實現form表單序列化提交

    在angularJs中前後端資料互動時 在新增時需要對form表單進行處理,並通過$http提交 需要注意 :     1. $http()引數列表為Json陣列     2. 需要對form

form表單序列化結果成為json格式的

$.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) {

jquery form表單序列化

sele 序列 內容 var ria proc 個數 ali checkbox 一、serialize() 作用 serialize() 方法通過序列化表單值，創建 URL 編碼文本字符串。 語法 $(selector).serialize()； 比如 $("b

jquery form表單序列化注意事項

我們先來講講表單中 中readonly和disabled的區別: readonly只對input和textarea有效, 但是disabled對於所以的表單元素都是有效的，包括radio，checkbox等 如果表單中使用的disabled那麼使用者是不能選

js: 將 form表單序列化

序列化 form form的序列化，即將表單中的鍵值序列化為可提交的字符串 表單 <form id="target"> <select name="age"> <option value="age1">20</opti

原生form表單序列化

用原聲js來實現我們的form表單序列化的函式； 首先我們列明步驟： 1）先獲取form表單使用ById或者是forms； 2）獲取後通過elements 取到表單中所有元素的陣列； 3）之後進行遍歷判斷型別（根據型別做相應的物件拼接）實現序列化物件； 程式碼如下： 1 f

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

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

form表單序列化轉json（後臺接收json轉object）

1.表單序列化 var entity = $("#formId").serializeArray(); 2.表單轉json封裝 function arrayToJsonObject(arr) {     var json = {};     for (var i = 0;

jquery實現form表單的submit和reset

<form id="formId" action=""> <input type="reset" style="display:none"> <div onclick="

form表單序列化JSON

1. 簡單屬性的表單域，序列化後只有一層JSON物件 /** * 功能：序列化form表單資料成Json物件 * 1.name均是簡單的一級物件 * 2.同名的name屬性，值會被序列化為陣列，例如checkbox等控制元件 */ $.fn

form表單序列化時缺少一些下拉框欄位的原因

最近碰到一個問題，在頁面修改一條記錄，有一個下拉框的值不改變，結果序列化form傳到後臺的時候，這個下拉框對應的屬性名沒有被傳到後臺，可是在選擇了下拉框的值之後，則序列化form的時候就有了這個屬性。之前是好的，修改過一次之後就變成這樣了。 經過仔細對比修改前後的程式碼和實

jquery實現form表單提交後區域性重新整理頁面的多種方法

最近做一個小專案，剛好需要用到搜尋功能，實現搜尋框內輸入資料然後按回車或者點選“提交”，然後給後臺資料庫處理並返回資料給前端，在前端區域性更新資料。 比如這樣的：但是遇到了一個小問題，就是form表單下任意輸入框輸入完按回車提交，整個頁面都會重新整理，就算我用ajax從後臺取

表單序列化，獲取Json物件

以下方法適用於所有表單元素 1、.serialize() $(selector).serialize()方法通過序列化表單值建立 URL 編碼文字字串 <form> <input type="checkbox" name="u

js 將json字符串轉換為json對象的方法解析

val 一個 例如 str1 其他 全局 man 找不到 json字符串 例如： JSON字符串:var str1 = ‘{ "name": "cxh", "sex": "man" }‘; JSON對象:var str2 = { "name": "cxh", "sex":

java 中xml轉換為json對象

xml轉換 serial () hid cti mave tostring code ace 1、前提須要jar包： json-lib-2.4-jdk15.jar 和 xom-1.2.5.jar ，maven 倉庫： net.sf.jso

.net json字符串轉換為json對象

對象 jos tom jobject ryu code des n) OS string rjosn = "fs:fsf";//json字符串 JObject jo1 = (JObject)JsonConvert.DeserializeObject(r

JQuery擴展方法實現Form表單與Json互相轉換

val adjust new 映射 checked josn fin pop undefined JQuery筆記 記兩段代碼，使用JQuery實現從表單獲取json與後端交互，以及把後端返回的json映射到表單相應的字段上。 把表單轉換出json對象 //把表單