澳门葡京投注网址

  • [预告]曾子墨做客传媒沙龙 "拷问民生、叩问生命" 2018-08-31
  • [静安]区举行决胜进博会动员大会 2018-08-31
  • [静安]区2018年全民禁毒宣传月启动仪式 2018-08-31
  • [青浦]青浦区服务保障进博会现场指挥部召开第八次全体会议 2018-08-31
  • [青浦]区委常委、政法委书记赵明来白鹤镇督查进博会维稳工作 2018-08-31
  • [视频]栗战书主持召开十三届全国人大常委会第五次委员长会议 2018-08-31
  • [视频]栗战书主持召开十三届全国人大常委会第二次委员长会议 2018-08-31
  • [视频]栗战书主持召开十三届全国人大常委会第一次委员长会议 2018-08-31
  • [视频]栗战书主持召开全国人大常委会大气污染防治法执法检查组第二次全体会议 2018-08-31
  • [视频]栗战书主持召开全国人大常委会党组会议专题学习习近平总书记关于人民代表大会制度的思想 2018-08-31
  • [视频]栗战书主持十三届全国人大常委会履职学习专题讲座 2018-08-31
  • [视频]栗战书与阿塞拜疆国民议会议长举行会谈 2018-08-31
  • [视频]栗战书与缅甸联邦议会议长兼民族院议长举行会谈 2018-08-31
  • [视频]习近平在视察北部战区海军时强调 贯彻转型建设要求 锻造海上精兵劲旅 2018-08-31
  • [视频]习近平在视察军事科学院时强调 努力建设高水平军事科研机构 为实现党在新时代的强军目标提供有力支撑 2018-08-31
  • 澳门葡京投注网址 澳门葡京投注网址 | 我的澳门葡京投注网址
    JQuery入门

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

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

    澳门葡京投注网址 www.guilhermecbo.com 我们有一个非常普通的表单:

     

    <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.guilhermecbo.com/file/item/2998

     

     


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

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