当前位置: 代码迷 >> Web前端 >> Jquery UI Dialog 之 Form 表单交付
  详细解决方案

Jquery UI Dialog 之 Form 表单交付

热度:233   发布时间:2012-10-15 09:45:24.0
Jquery UI Dialog 之 Form 表单提交

我就不介绍Jquery UI Dialog了,不过其中的一些属性可以到这里去找:http://www.cnblogs.com/bestfc/archive/2009/06/08/1498742.html。 比较全面喔。(我也是在这里看的,哈哈。)


至于需要引入什么文件,我的不说了。给个网站:http://www.cnblogs.com/haogj/archive/2011/02/16/1956267.html(我真的很懒。)


我专注的是Dialog的Form表单提交的问题。


不知道大家使用Dialog的方式是什么,我就说说我用的方式吧。


<div id="dialog">
		<form id="dialogForm" method="post" action="user/add">
			<table>
				<tr>
					<td>名字:</td>
					<td>
						<input type="text" name="name"/>
					</td>
				</tr>
				<tr>
					<td>年龄:</td>
					<td>
						<input type="text" name="age"/>
					</td>
				</tr>
			</table>
		</form>
	</div>

$("#dialog").dialog({
			modal: true,
			autoOpen: false,
			buttons:{
				"确定":function(){
					var form = $("#dialogForm");
					$.ajax({
	        			url:form.attr('action'),
	        			type:form.attr('method'),
	        			data:form.serialize(),
	        			dataType:"json",
	        			success:function(data){
	        				$("#dialog").dialog("close");
	        				alert("成功啦");
	        			},
	        			error:function(){
	        				$("#dialog").dialog("close");
	        				alert("出错了哦");
	        			}
					}
				},
				"关闭": function() {
					$("#dialog").dialog("close");
				}
			}
		});

就这样,直接将form写在div里面就可以了. 然后form.serialize()获得到所有数据。就ok啦,挺容易的。


之前在这个问题上纠结了挺久,看看国外的网站说的都是一些另类玩意,不方便也不实用。自己摸索摸索就出来啦。


有什么不懂的欢迎留言。



  相关解决方案