好库网 好库网首页 | 我的好库
JQuery入门

jQuery实现Ajax提交form表单的简单方法

发布者:jquery2000
发布日期:2012/5/27 22:41:37   更新日期:2012/10/28 21:48:57
阅读次数:24294
评分:4.80
介绍:介绍了如何将一个普通的form表单,迅速改造成通过ajax方式提交,并将结果显示在对话框中。
正文:

我们有一个非常普通的表单:

 

<form id="form1" name="form1" method="get" action="post.html">
标题<input id="testtitle" name="testtitle" type="text" size="40" />
<input type="submit" value="提交">
</form>

为了演示方便,method使用了get,可以根据需要改为post。

 

现在我们把它改造成AJAX方式提交,方法很简单,只需要将下面的代码复制到页面中:

 

<link type="text/css" href="jquery-ui.css" rel="stylesheet" />
<style>
#loading{background-image:url(images/loading.gif);background-position:0px 0px;background-repeat:no-repeat; position:absolute;width:50px;height:50px;top:60%;left:50%;margin-left:-25px;text-align:center;}
</style>
<script type ="text/javascript" src="jquery.js"></script>
<script type ="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
    bindSubmit();
    $("#loading").hide();
    $("#msgdlg").hide();
});

function bindSubmit() {
    var options = {
            target: '#msgdlg',
            success: showResponse,
            error: showError

            // 其它可选参数: 
            //url:       url         // override for form's 'action' attribute 
            //type:      type        // 'get' or 'post', override for form's 'method' attribute 
            //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
            //clearForm: true        // clear all form fields after successful submit 
            //resetForm: true        // reset the form after successful submit 

            // $.ajax 选项,例如超时: 
            //timeout:   3000 
        };

        $('#form1').submit(function () {
            $(this).ajaxSubmit(options);
			$("#loading").show();
            return false;
        });
}

// 成功响应的回调函数
function showResponse(responseText, statusText, xhr, $form) {
    $("#loading").hide();
	messagebox(responseText);
}

// 响应失败
function showError(xhr, ajaxOptions, thrownError) {
    $("#loading").hide();
	messagebox("出错了!" + thrownError);
}

// 显示结果信息的对话框
function messagebox(msg) {
    $("#msgdlg").html(msg);
    $("#dialog:ui-dialog").dialog("destroy");
    $("#msgdlg").dialog({
            modal: true,
            width: 380,
            height: 230,
            buttons: {
                确认: function () {
                    $(this).dialog("close");
                }
            }
    });
}
</script>

<div id="msgdlg" title="消息"></div>
<div id="loading" style="display:none" ondblclick="this.style.display='none'"></div>

代码中关键的几点:

(1)$('#form1').submit()对Form的Submit的绑定 (使用了jquery.form.js)

(2)定义的showResponse函数处理返回信息。

(3)$("#msgdlg").dialog()创建对话框并显示结果 (使用了jquery-ui.js)

 

下载源代码:http://www.okbase.net/file/item/2998

 

 


评论 [发表评论]
账号 密码 还没帐号呢,现在注册一个?

免责声明:好库网所展示的信息由买卖双方自行提供,其真实性、准确性和合法性由信息发布人负责。好库网不提供任何保证,并不承担任何法律责任。