您的位置：首页 > 其它

怎么实现表单提交后不重新刷新当前页面

2016-12-07 15:17 579 查看

如何实现表单提交后不重新刷新当前页面

<form name='form1' id='form1' action='/xbcw/cw/xx_xx.action' method='post'>

　　<input type="button" id="btnSubmit" name="btnSubmit" value="保存" onclick="addKp()" class="Button2" />

　　<input type="button" id="btnSubmit" name="btnSubmit" value="下一步" onclick="doAddCwKpSubmit()" class="Button2" />

</form>

当我点击保存提交FORM表单后,如何让当前页面维持不变(即不刷新当前页)？

在FORM表单后添加一个iframe，即<form name='form1' id='form1' action='/xbcw/cw/xx_xx.action' method='post'
target="rfFrame">

<iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>

点保存提交事件里面需要将target改为iframe的名字:

　　JS:document.forms[0].target="rfFrame";

       JQuery:$("#f2").attr("target","rfFrame");

这样即提交了FORM保存了数据,页面也不会跳转.

具体的原理是：form表单提交到iframe里面处理，而这个iframe是隐藏的，所以提交表单的时候当前页面没有发生任何变化。form的target属性指向iframe的name值，这样就实现了提交到隐藏的iframe中。

那么返回值应该怎么获取呢？

var frame1 = document.getElementById("frameFile1").contentDocument; //获取到iframe里面的

html元素

var frameJson1 = JSON.parse($(frame1).find('pre').html());

//根据获取到的元素进行相应的操作

这样的话基本上可以模拟ajax的操作，实现无刷新提交表单。

用隐藏的 IFrame 提交表单部分替代Ajax。
原理如下：
1.写一个Javascript类，动态添加一个IFrame。具体是在 document.body 对象中appendChild 如下结构：

<DIV id="i_frame_div">

<IFrame id="i_frame" name="i_frame" width="1px" height="1px" style="display:none" src="inner.html"></IFrame>

</DIV>

这是通过Style的"display:none",来实现IFrame的不可见的；

不可以设成style="width:0px,height:0px,display:none"，这样会导致一些浏览器不添加IFrame

首先用DOM的方式生成<DIV>，然后使用：

var i_div = document.getElementById("i_frame_div");

i_div.innerHTML="<IFrame id=＼"i_frame＼" name=＼"i_frame＼" width=＼"1px＼" height=＼"1px＼" style=＼"display:none＼" src=＼"inner.html＼"></IFrame>";

的方式将IFrame嵌入页面内；

注意，不要使用 DOM 的方式，这样会导致通过 IE 的 DOM 树不能正常获得IFrame内前网页的内容；

即不要采取如下形式：

var i_frame=document.createElement("IFrame");

i_frame.id="i_frame";

...

var i_div = document.getElementById("i_frame_div");

i_div.appendChild(i_frame);

这样的代码在<Form target="i_frame">提交时，IFrame的内嵌页面inner.html在FireFox中会自动刷新。而IE 6.0 则会新弹出一个窗口；

src属性必须指定一个空的html文件；

2.将这个类实例化为一个全局变量，这个类的构造函数就写成以上代码；

3.写一个<Form>, 注意：
将其属性target指向IFrame的名称，这样提交后返回的目标页面就会在IFrame中，而不被看见。

将提交按钮改为一般的Button ：<INPUT type="button" onclick="func()">

4.为以上类添加一个函数sendFileRequest（），参数放入Form的名称和回调函数的指针，这样就可以像表单中在提交前添加一些需要的变量，并且提交；

5.这里注意一点，如果表单<Form>中不包含<Input type="file">这样的元素的话，表单内容完全可以自动生成，例如可以通过函数sendFileRequest（）进行构建,或在嵌入的页中进行构建，然后把表单的各种值以Key=Value数组的形式传入，借此可以封装成一个函数：

var form=document.createElement("Form");

...

但如果包含<Input type="file">的话，文件上传时该tag的属性value是文件的名称，而此属性是只读的不能被赋值：

var fileInput=document.createElement("Input");

fileInput.type="file";

fileInput.name="myName"

fileInput.value="myfile.txt" //此句会出错

这是由于安全的原因，<Input type="file">不能被赋值；

这样，表单必须做正常形式，target指向IFrame的name。

6.在以上的那个类中，再添加一个函数作为回调函数getResponse(msg):

getResponse:function(msg){

   this.responseText=msg;

   this.HandleResponse.call(this);

   //调用用户传入的回调函数

}

7.服务器端程序的撰写。主要是向IFrame提交一个可自动运行的网页：

<HTML>

<HEAD><TITLE></TITLE></HEAD>

<BODY onload="doit();"></BODY>

<SCRIPT LANGUAGE="JavaScript">



</SCRIPT>

</HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航