JQuery表单序列化

方式一：serialize()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="" id="test1">username: <input type="text" name="username">password: <input type="password" name="password"><button id="submit">submit</button>
</form>
</body>
<script>
$('#submit').click(function () {console.log($('#test1').serialize());return false;
});
</script>
</html>

把表单信息序列化成一个字符串，结果是一串字符串： username=name&password=123

方式二：serializeArray()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="" id="test1">username: <input type="text" name="username"><br>password: <input type="password" name="password"><br><button id="submit">submit</button>
</form>
</body>
<script>$('#submit').click(function () {console.log($('#test1').serializeArray());return false;
});
</script>
</html>

把表单信息序列化成一个JSON数组对象，结果是一个json数组对象：

[{"name":"username","value":"name"},{"name":"password","value":"123"}]

方式三：自定义serializeObject()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="" id="test1">username: <input type="text" name="username"><br>password: <input type="password" name="password"><br><button id="submit">submit</button>
</form>
</body>
<script>// 自定义方法jQuery.prototype.serializeObject=function(){var obj=new Object();$.each(this.serializeArray(),function(index,param){if(!(param.name in obj)){obj[param.name]=param.value;}});return obj;};$('#submit').click(function () {console.log(($('#test1').serializeObject()));return false;
});
</script>
</html>

自定义格式，处理成一个JSON格式数据，打印结果： {username: "name", password: "123"}

JQuery表单序列化相关推荐

JQuery表单序列化方式
使用场景:ajax提交表单数据 <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
Jquery表单序列化（serialize、serializeArray、serializeJson）及序列化后追加参数
文章目录表单提交的原则结论一:name相同的表单提交格式结论二:没有name的表单.disabled的表单结论三:redio.checkbox选中值却没有value属性结论四:被选中的opt ...
jQuery表单序列化方法serialize(),serializeArray()
我们使用ajax给后台传递数据的时候,经常要获取表单的数据.表单数据不多还好说,但是如果表单字段非常多,那么无疑是非常头疼的事.如何获取大量的表单数据,是非常重要的事情. 表单页面 <for ...
jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
jquery表单ajax json数据,jquery序列化form表单使用ajax提交后处理返回的json数据
1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...
jQuery Form Plugin (jquery表单插件)
jQuery表单插件 jQuery.form 这是一个全面支持表单的jQuery插件,支持文件上传,包含以下一些方法: -ajaxForm -ajaxSubmit - formToArray - fo ...
js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么
js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么一.总结一句话总结:两者都是对表单进行序列化,serializeArray()返回的是json ...
原生js实现form表单序列化的方法
当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼:我们一起用原生来写一个表单序 ...
ajax异步请求——form表单提交及表单序列化提交
ajax异步请求 AJAX介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),它不是一种新的编程语言,而是一种使用现有标准的新方 ...

JQuery表单序列化

方式一：serialize()

方式二：serializeArray()

方式三：自定义serializeObject()

JQuery表单序列化相关推荐

最新文章

热门文章