js实现表单序列化的两种方法。

function serialize(form) {
    var parts = [],
            elems = form.elements,
            i = 0,
            len = elems.length,
            filed = null;
    for (; i < len; i++) {
        filed = elems[i];
        switch (filed.type) {
            case "select-one":
            case "select-multiple":
                if (filed.name.length) {
                    var j = 0,
                            opt,
                            optLen = filed.options.length;
                    for (; j < optLen; j++) {
                        opt = filed.options[j];
                        if (opt.selected) {
                            parts.push(encodeURIComponent(filed.name) + "=" + encodeURIComponent(opt.value));
                        }
                    }
                }
                break;
            case undefined:
            case "submit":
            case "reset":
            case "file":
            case "button":
                break;
            case "radio":
            case "checkbox":
                if (!filed.checked) {
                    break;
                }
            default:
                if (filed.name.length && filed.value) {
                    parts.push(encodeURIComponent(filed.name) + "=" + encodeURIComponent(filed.value));
                }
        }
    }
    return parts.join("&");
}

这个方法重点用了HTML5中的FormData ,还有es6中for of循环。

  function serialize(form) {
        var formData = new FormData(form),
            getValue = formData.entries(),
            parts = [];
        for (var pair of getValue) {
            parts.push(pair[0] + "=" + pair[1]);
        }
        return parts.join("&");
    }
时间: 2024-10-21 20:51:48

js实现表单序列化的两种方法。的相关文章

js阻止表单提交的两种方法

<body>     <form action="clock.html" method="post" onsubmit="return checkLength()">         <p>name:<input type="text" name="user" id="user"></p>         <input t

关于表单序列化的三种方法

表单序列化: 方法1:serialize(): 就是把表单信息序列化成一个字符串 (认为最常用 的方法) <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $

html表单提交的几种方法

原文地址:http://www.ijser.cn/?p=34 最普通最经常使用最一般的方法就是用submit type..看代码: <form name=”form” method=”post” action=”#"> <input type=”submit” name=”submit” value=”提交"> </form> 另外,另一种经常使用的方法是使用图片: <form name=”form” method=”post” action=

form表单提交的两种方式 button和submit的使用方法

1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的头部插入一个js方法: function checkUser(){   var result = document.getElementById("userid").value;   var password = document.getElementById("userpass

form表单提交的两种方式

1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的头部插入一个js方法: function checkUser(){   var result = document.getElementById("userid").value;   var password = document.getElementById("userpass

修改表中数据的两种方法(update改)

1.通过点击按钮来执行修改表中数据.(数据库和表的创建不在详细介绍,请自动阅读数据库和表的创建) 第一种方法:直接使用SQL来操作数据库,调用execSQL(sql)语句 public class MainActivity extends AppCompatActivity { private Button mPudateButton; private MySqliteHelper mMySqliteHelper; private SQLiteDatabase db; @Override pro

删除表中数据的两种方法(delete删)

1.通过点击按钮来执行删除表中数据.(数据库和表的创建不在详细介绍,请自动阅读数据库和表的创建) 第一种方法:直接使用SQL来操作数据库,调用execSQL(sql)语句 public class MainActivity extends AppCompatActivity { private Button mDeleteButton; private MySqliteHelper mMySqliteHelper; private SQLiteDatabase db; @Override pro

表中输入数据的两种方法(insert增)

1.通过点击按钮来执行往表中添加数据.(数据库和表的创建不在详细介绍,请自动阅读数据库和表的创建) 第一种方法:直接使用SQL来操作数据库,调用execSQL(sql)语句 public class MainActivity extends AppCompatActivity { private Button mInsertButton; private MySqliteHelper mMySqliteHelper; private SQLiteDatabase db; @Override pr

form表单提交的几种方法

<form id="myform" name="myform" method="post" onsubmit="return sumbitTest();" action="RegisterAction.action"> <table> <tr> <td>姓名:</td> <td> <input type="text&qu