jQuery實現Ajax提交form表單的程式

來源:互聯網
上載者:User


介紹:介紹了如何將一個普通的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)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.