json学习【2】——Javascript将Form数据转化成Json对象

最新推荐文章于 2023-06-06 12:00:52 发布

小黑不是小黑

最新推荐文章于 2023-06-06 12:00:52 发布

阅读量270

点赞数

分类专栏： json

json 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .group{margin: 10px 0; clear: both; display: flex;}
            .left{float: left; width: 120px; text-align: right;}
            .right{float: right; flex: 1;}
            .size{margin: 5px 0;}
            input[type='number']{width: 80px;}
            .show{width: 400px; height: 400px; overflow: auto;}
            input[type='button']{height: 40px;}
            div{margin-bottom: 10px;}
        </style>
    </head>
    <body>
        <form onSubmit="return false;">
         <div class="group">
          <div class="left">radio：</div>
                <div class="right">
                    <label for="radio-0"><input value="是" type="radio" name="radio" id="radio-0" />是</label>
                    <label for="radio-1"><input value="否" type="radio" name="radio" id="radio-1" />否 </label>
                </div>
            </div>
            <div class="group">
          <div class="left">checkbox：</div>
                <div class="right">
                    <label for="checkbox-0"><input value="0" type="checkbox" name="checkbox" id="checkbox-0" />0 </label>
                    <label for="checkbox-1"><input value="1" type="checkbox" name="checkbox" id="checkbox-1" />1 </label>
                </div>
            </div>
            <div class="group">
             <div class="left">input：</div>
             <div class="right">
               <input type="text" name="input1" placeholder="正常" />
               <input type="text" name="input2" value="已禁用" disabled />
             </div>
            </div>
            <div class="group">
             <div class="left">textarea：</div>
             <div class="right">
              <textarea name="textarea"></textarea>
             </div>
            </div>
            <div class="group">
             <div class="left">select：</div>
             <div class="right">
              <select name="select" style="width: 100px;">
               <option value="1">value=1</option>
               <option value="2">value=2</option>
              </select>
             </div>
            </div>
            <div><input type="button" id="fun1" value="转换1" /> <input id="fun2" type="button" value="转换2" /></div>
            <div style="color: red;">注意：disabled的input没有显示出来</div>
            <div>结果1：</div><div id="result1"></div>
            <div>结果2：</div><div id="result2"></div>
        </form>
        <script src="http://asset.jdk5.com/js/lib/jquery.js"></script>
        <script src="http://asset.jdk5.com/js/lib/json.js"></script>
        <script type="text/javascript">
$(function (){
    $.fn.serializeObject = function(){
    var o = {};
    var a = this.serializeArray();
       $.each(a, function() {
         if (o[this.name] !== undefined) {
              if (!o[this.name].push) {
                  o[this.name] = [o[this.name]];
              }
              o[this.name].push(this.value || '');
          } else {
          o[this.name] = this.value || '';
          }
       });
        return o;
    }
          
    $("#fun1").click(function (){
             var data = {};
             $("form").serializeArray().map(function(x){
                    if (data[x.name] !== undefined) {
                          if (!data[x.name].push) {
                              data[x.name] = [data[x.name]];
                          }
                          data[x.name].push(x.value || '');
                     } else {
                     data[x.name] = x.value || '';
                     }
            });
            $("#result1").html(JSON.stringify(data));
    });
    
    $("#fun2").click(function (){
            var data = $("form").serializeObject();
            $("#result2").html(JSON.stringify(data));
    });
});
</script>

    </body>
</html>

FROM：http://blog.jdk5.com/zh/convert-form-data-to-javascript-object-with-jquery/

小黑不是小黑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
json学习【2】——Javascript将Form数据转化成Json对象

.group{margin: 10px 0; clear: both; display: flex;} .left{float: left; width: 120px; text-align: right;} .right{float: right; flex: 1;} .size{margin: 5px 0;}
复制链接

扫一扫

专栏目录