Jq serialize方法始终无法获取到最新form表单值

黑暗浪子 2015-08-10 09:05:59
问题：Jquery自带的serialize()方法一直获取不到最新的表单值，获取的一直都是原始值，不论我怎么修改，获取的都是旧值。
我是在浏览器控制台打印的：
console.log($("#edit_form").serialize());

详细的form代码如下所示：
<form class="form-horizontal" id="edit_form" role="form">

			<div class="form-group">

				<label class="col-sm-3 control-label" for="heading">标题：</label>

				<div class="col-sm-8">

					<input name="accordionId" style="display: none;" value="2">

					<input name="isDefault" style="display: none;" value="">

					<input name="heading" class="form-control" id="heading" type="text" value="工作所需">

				</div>

			</div>

			<div class="form-group">

				<label class="col-sm-3 control-label" for="subHeading">副标题：</label>

				<div class="col-sm-8">

					<input name="subHeading" class="form-control" id="subHeading" type="text" value="包含工作中常用链接">

				</div>

			</div>

			<div class="form-group">

				<label class="col-sm-3 control-label" for="sortNumber">排序：</label>

				<div class="col-sm-8">

					<input name="sortNumber" class="form-control" id="sortNumber" type="text" value="1">

				</div>

			</div>

		<div class="form-group">

			<label class="col-sm-3 control-label" for="sortNumber"> </label>

			<div class="col-sm-8">

						<input class="btn btn-default btn-lg btn-block" onclick="option('http://localhost:8080/homepage/MainController/updateAccordion.do')" type="button" value="提交">

			</div>

		</div>

	</form>

使用如下脚本：
console.log($("#edit_form").serialize());

获取到的值是：
accordionId=2&isDefault=&heading=%E5%B7%A5%E4%BD%9C%E6%89%80%E9%9C%80&subHeading=%E5%8C%85%E5%90%AB%E5%B7%A5%E4%BD%9C%E4%B8%AD%E5%B8%B8%E7%94%A8%E9%93%BE%E6%8E%A5&sortNum=1
上面这个值是旧的，不是最新的
使用如下脚本：
console.log($("#edit_form input").serialize());

获取到的值是：
accordionId=2&isDefault=&heading=%E5%B7%A5%E4%BD%9C%E6%89%80%E9%9C%80&subHeading=%E5%8C%85%E5%90%AB%E5%B7%A5%E4%BD%9C%E4%B8%AD%E5%B8%B8%E7%94%A8%E9%93%BE%E6%8E%A5&sortNumber=1&accordionId=2&isDefault=&heading=1&subHeading=1&sortNumber=1
这个时候，获取到最新取值了，但是重复获取了，而且旧值也被获取到了
实在是没有分了，抱歉，就82分
...全文
2358 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
黑暗浪子 2015-08-11
  • 打赏
  • 举报
 回复
引用 1 楼 DaveLeeCN 的回复:
看看是不是缓存的原因，在ajax里面添加一句：cache:false试试（没遇到过这方面问题，你可以试试）
不行的，我原本就是设置了false的
DaveLeeCN 2015-08-10
  • 打赏
  • 举报
 回复
看看是不是缓存的原因，在ajax里面添加一句：cache:false试试（没遇到过这方面问题，你可以试试）
黑暗浪子 2015-08-10
  • 打赏
  • 举报
 回复
引用 5 楼 u012453619 的回复:
[quote=引用 4 楼 sohighthesky 的回复:] 使用 type="hidden" instead of style="display:none", jQuery serialize will ignore input elements without type property.
这个问题困扰我三天了都，js脚本我仅仅是用了如下代码： 
function option(url){
		var i = undefined;
		var data = $("#edit_form").serialize();
		alert($("#edit_form").serialize());
		$.ajax({
			"dataType":"json",
			"method":"post",
			"timeout":10000,
			"contentType":"application/x-www-form-urlencoded; charset=UTF-8",
			"url":url,
			"cache":false,
			"data":data,
			"success":function(data){
				loadContent("initAccordion","<%=basePath%>MainController/systemSetting.do",{"userId":"hujie@173lu.com"});
			},
			"beforeSend":function(){
				layer.closeAll('page'); 
				i = layer.msg("我在等服务器大哥给我数据",{icon:16});
			},
			"complete":function(jqXHR){
				layer.close(i);
			},
			"statusCode":{
				404:function(){layer.alert("服务器搬到月球去了");},
			}
		});
很郁闷，$("#edit_form").serialize();去序列化的时候，每次都是初始值，后续的更改都无法获取到，如果用$("#edit_form input").serialize();去获取，就出现了重复的现象，并且ajax事件被服务器端拒绝了，也就是400错误，这段代码仅仅是结合着bootstrap3.2来写的，还有，使用了layer插件，以type = 1（页面元素）的方式将这段html做成了一个看上去类似弹出层的样子，并没有别的js脚本了，已从我用序列化，从来没遇到过，不知道是不是结合插件的原因造成的[/quote] 并且我直接使用$("#heading").val()，也获取不到最新的值了，，也是初始值，很头疼，总感觉可能是插件不兼容
黑暗浪子 2015-08-10
  • 打赏
  • 举报
 回复
引用 4 楼 sohighthesky 的回复:
使用 type="hidden" instead of style="display:none", jQuery serialize will ignore input elements without type property.
这个问题困扰我三天了都，js脚本我仅仅是用了如下代码： 
function option(url){
		var i = undefined;
		var data = $("#edit_form").serialize();
		alert($("#edit_form").serialize());
		$.ajax({
			"dataType":"json",
			"method":"post",
			"timeout":10000,
			"contentType":"application/x-www-form-urlencoded; charset=UTF-8",
			"url":url,
			"cache":false,
			"data":data,
			"success":function(data){
				loadContent("initAccordion","<%=basePath%>MainController/systemSetting.do",{"userId":"hujie@173lu.com"});
			},
			"beforeSend":function(){
				layer.closeAll('page'); 
				i = layer.msg("我在等服务器大哥给我数据",{icon:16});
			},
			"complete":function(jqXHR){
				layer.close(i);
			},
			"statusCode":{
				404:function(){layer.alert("服务器搬到月球去了");},
			}
		});
很郁闷，$("#edit_form").serialize();去序列化的时候，每次都是初始值，后续的更改都无法获取到，如果用$("#edit_form input").serialize();去获取，就出现了重复的现象，并且ajax事件被服务器端拒绝了，也就是400错误，这段代码仅仅是结合着bootstrap3.2来写的，还有，使用了layer插件，以type = 1（页面元素）的方式将这段html做成了一个看上去类似弹出层的样子，并没有别的js脚本了，已从我用序列化，从来没遇到过，不知道是不是结合插件的原因造成的
sohighthesky 2015-08-10
  • 打赏
  • 举报
 回复
使用 type="hidden" instead of style="display:none",

jQuery serialize will ignore input elements without type property.

sohighthesky 2015-08-10
  • 打赏
  • 举报
 回复
请提供完整的js代码
zhanbaone 2015-08-10
  • 打赏
  • 举报
 回复
http://blog.csdn.net/cy88310/article/details/6908826 可以去看看 楼主
jQuery-serialize()输出序列化form表单值的方法
jQuery-serialize()输出序列化表单值在工作中很常见也很实用，于是本人搜集整理了一些，需要了解的朋友可以详细参考下
jQuery基于ajax()使用serialize()提交form数据的方法
jQuery的serialize()方法通过序列化表单值，创建URL编码文本字符串，我们就可以选择一个或多个表单元素，也可以直接选择form将其序列化，如： <form action=> First name: <input type=text name=...
jquery form表单获取内容以及绑定数据
在日常开发的过程中，难免会用到form表单，我们需要获取表单的数据保存到数据库，或者拿到后台的一串json数据，要将数据绑定到form表单上，这里我写了一个基于jquery的，formHelp插件，使用起来也很简单： 获取表单...
Ajax serialize() 表单进行序列化方式上传文件
通过传统的 form 表单提交的方式上传文件 <form id="uploadForm" action="" method="post" enctype="multipart/form-data"> 上传文件：<...使用 serialize() 对 form 表单进行序列化提交 $.a
jquery.serialize-hash:jQuery插件，该插件从表单的序列化返回哈希值。 支持输入名称的小写
如果要从表单获取值并将其与另一个哈希合并，或者在需要JSON的任何地方，这将很方便。 它与Handlebars.js，Backbone.js或其他任何使用JSON的工具配合使用。 ＃例子： 在这里，我们有一个带有传统type="text"输入...
JavaScript

87,923

社区成员

224,617

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章