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

最新推荐文章于 2023-12-01 14:35:44 发布

zuoanlove

最新推荐文章于 2023-12-01 14:35:44 发布

阅读量592

点赞数

jQuery 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

jQueryUI

6 篇文章 0 订阅

订阅专栏

Ajax

1 篇文章 0 订阅

订阅专栏

转载自：http://www.okbase.net/doc/details/2539

介绍：介绍了如何将一个普通的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方式提交，方法很简单，只需要将下面的代码复制到页面中：

<html>
<body>
<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);
    //bindSubmit();
}

function showError(xhr, ajaxOptions, thrownError) {
    $("#loading").hide();
	messagebox("出错了!" + thrownError);
    bindSubmit();
}

// 显示结果信息的对话框
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>


<form id="form1" name="form1" method="get" action="post.html">
标题<input id="testtitle" name="testtitle" type="text" size="40" />
<input type="submit" value="提交">
</form>
<div id="msgdlg" title="消息"></div>
<div id="loading" style="display:none" οndblclick="this.style.display='none'"></div>
</body>
</html>

代码中关键的几点：

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

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

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

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

zuoanlove

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现Ajax提交form表单的简单方法

转载自：http://www.okbase.net/doc/details/2539介绍：介绍了如何将一个普通的form表单，迅速改造成通过ajax方式提交，并将结果显示在对话框中。正文：我们有一个非常普通的表单：标题为了演示方便，method使用了get，可以根据需要改为post。现在我们把它改造成AJAX方式提交，方法很简单，只
复制链接

扫一扫