• 无刷新提交form表单


    今天遇到一个问题,项目中form表单是使用submit()提交的,但是要实现无刷新的提交,当然无刷新提交数据,ajax肯定可以完成,但是由于代码已经很成熟,都是使用form提交的,不能再去重写,所以就找到了下面这个办法,感觉很好用,主要就四步:

    1.在当前页面建一个iframe 并隐藏(display:none).
    2.给新建的这个iframe起个名字,例如:id_Iframe
    3.form表单的target属性的值一定要是刚起的这个名字 id_Iframe

    4.提交表单。就是无刷新了。

    <form id="commentForm" action="${s.base}/news/signupComment.html" method="post" target="id_iframe">
        <iframe id="id_iframe" name="id_iframe" style="display:none;"></iframe>
        <input type="hidden" name="objectId" value="${(entity.id)!}"/>
        <ul class="signup-info">
            <li>
                <span id="commentTip" style="margin-left: 10px;color:#777;"></span>
            </li>
            <li>
                <label>
                    您的名字:
                </label>
                <input id="name" class="input-text" type="text" name="name" value=""/>
            </li>
            <li>
                <label>
                    您的性别:
                </label>
                <input class="input-radio" type="radio" name="gender" value="男" checked="checked"/>
                <span></span>
                <input class="input-radio" type="radio" name="gender" value="女"/>
                <span></span>
            </li>
            <li>
                <label>
                    联系方式:
                </label>
                <input id="phone" class="input-text" type="tel" name="phone"  value=""/>
            </li>
        </ul>
       <!-- <a data-num='1' class="addnew" href="javascript:;">
            +添加新报名者
        </a>-->
        <input class="confirm-btn" type="button"  οnclick="doComment();" value="确认报名"/>
    </form>

    //提交
    function doComment(){
        var indeityCode = $('#name').val();
        if(indeityCode == '' || indeityCode == null ){
            $('#commentTip').css('color','red').html('姓名不能为空');
            return;
        }
        var content = $('#phone').val();
        if(content == '' || content == null){
            $('#commentTip').css('color','red').html('电话不能为空');
            return;
        }
    
        $('#commentForm').submit().ajaxSubmit({
            datatype : 'json',
            success : function(resp) {
                var resp = $.parseJSON(resp);
               // alert(JSON.stringify(resp));
                if (resp.errcode == 0) {
                    alert("报名成功!");
                } else {
                    alert("报名失败!");
                }
                $('#name').val('');
                $('#phone').val('');
                $('#commentTip').css('color','').html('');
            },
            error : function(xhr) {
                //alert(JSON.stringify(xhr));
            }
        });
    }

  • 相关阅读:
    Thread中的join使用
    java.lang.NoClassDefFoundError: Ljavax/enterprise/inject/spi/BeanManager;
    org.hibernate.HibernateException: Could not parse configuration: /hibernate.cfg.xm
    maven 中使用jstl 错误解决
    eclipse 安装maven
    前端 JS事件操作
    前端 JS
    前端 固定位置 与绝对定位
    前端 显示与隐藏
    前端 盒子阴影
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13300633.html
Copyright © 2020-2023  润新知