jQuery序列化表单为JSON对象

nf456的头像 nf456 6 2015-01-04 22:08 1

 基本信息

× 1    × 1   

浏览数: 5013

分享时间: 4 年 前

2
    <form id="myform">  
        <table>  
            <tr>  
                <td>姓名:</td>  
                <td> <input type="text" name="name" /> </td>  
            </tr>  
            <tr>  
                <td>性别:</td>  
                <td>  
                    <input type="radio" name="sex" value="1"> 男  
                    <input type="radio" name="sex" value="0"> 女  
                </td>  
            </tr>  
            <tr>  
                <td>年龄:</td>  
                <td>  
                    <select name="age">  
                        <option value="20">20</option>  
                        <option value="21">21</option>  
                        <option value="22">22</option>  
                    </select>  
                </td>  
            </tr>  
            <tr>  
                <td>爱好</td>  
                <td>  
                    <input type="checkbox" value="basketball" name="hobby">篮球  
                    <input type="checkbox" value="volleyball" name="hobby">排球  
                    <input type="checkbox" value="football" name="hobby">足球  
                    <input type="checkbox" value="earth" name="hobby">地球  
                </td>  
            </tr>  
            <tr>  
                <td colspan="2">  
                    <input type="button" id="ajaxBtn" value="提交" />  
                </td>  
            </tr>  
        </table>  
    </form>  

    <script type="text/javascript">  
          
        $(function() {  
            $("#ajaxBtn").click(function() {  
                    var params = $("#myform").serializeObject(); //将表单序列化为JSON对象   
                    console.info(params);  
                })  
        })  
      
        $.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 || '');  
                } else {  
                    o[this.name] = this.value || '';  
                }  
            });  
            return o;  
        }  
    </script>  


12 3 [下一页]

  • jhoneila的头像 jhoneila 2018-12-22 15:09 代码数:0

    I am happy to find this post very useful for me, as it contains lot of information. I always prefer to read the quality content and this thing I found in you post. Thanks for sharing.Training Bat for Softball

  • jhoneila的头像 jhoneila 2018-12-22 15:29 代码数:0

    I am happy to find your distinguished way of writing the post. Now you make it easy for me to understand and implement the concept. Thank you for the post. First Aid Classes Bend Oregon

  • ossaa的头像 ossaa 2018-12-26 22:20 代码数:0

    Thank you for helping people get the information they need. Great stuff as usual. Keep up the great work!!!

    televisão

  • annashetty的头像 annashetty 2018-11-06 17:36 代码数:0

    I am grateful to have opened this discussion. This question is quite interesting to me. Finally the answer was found driving directions

  • ossaa的头像 ossaa 2018-11-11 18:16 代码数:0

    The information you have posted is very useful. The sites you have referred was good. Thanks for sharing...

    digital marketing

  • ossaa的头像 ossaa 2018-11-12 23:25 代码数:0

    I’ve been searching for some decent stuff on the subject and haven't had any luck up until this point, You just got a new biggest fan!..

    shakadang trail

  • ossaa的头像 ossaa 2018-05-19 20:50 代码数:0

    I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.  selfishmum.co.uk

  • ossaa的头像 ossaa 2019-01-09 15:15 代码数:0

    Awesome blog. I enjoyed reading your articles. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work!

    duvet cover

  • ossaa的头像 ossaa 2019-01-14 03:15 代码数:0

    Awesome blog. I enjoyed reading your articles. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work!

    Blog of The People

  • ossaa的头像 ossaa 2018-05-24 18:28 代码数:0

    I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people.

    Read More

您的评论: