今天遇到一个问题,项目中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)); } }); }