Jquery UI Dialog 之 Form 表单提交

来源:岁月联盟 编辑:exp 时间:2012-10-12

我就不介绍Jquery UI Dialog了,不过其中的一些属性可以到这里去找: 
至于需要引入什么文件,我的不说了。给个网站:http://www.cnblogs.com/haogj/archive/2011/02/16/1956267.html(我真的很懒。)

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

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

[html] 
<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> 

[javascript] 
$("#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啦,挺容易的。

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

有什么不懂的欢迎留言。