jquery如何实现form提交无刷新返回一个页面

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery如何实现form提交无刷新返回一个页面相关的知识，希望对你有一定的参考价值。

参考技术A jquery有个ajax方法是实现异步的（就是你所说的无刷新），然后你绑定表单的onsubmit事件，异步访问你要提交的页面，return false（这样本页面就不会提交了），可以实现你所说的form提交无刷新，代码如下
$(document).ready(function()
//使用jQuery异步提交表单
$('#表单ID').submit(function()
jQuery.ajax(
url: '要提交的页面',
data: $('#表单ID').serialize(),
type: "POST",
beforeSend: function()

//在异步提交前要做的操作
,
success: function()

//在异步提交成功后要做的操作

);
return false;
);
); 参考技术B 用ajax啊，jquery有这个功能。

http://blog.sina.com.cn/s/blog_696c8e1801014erk.html

这个里面有例子，你看看。 参考技术C 使用Ajax来提交数据．
具体使用请搜索一下jQuery的Ajax调用

使用iframe实现页面无刷新提交表单

iframe提交表单其实比ajax要方便一些，当然ajax也有ajax的好处，只是ajax编码处理有时有些麻烦，虽然经过转码是可以解决中文问题，但如果直接使用iframe不存这些问题了,下面来看看。

最近在做一个项目，用到上传图片功能，发现ajax不能enctype=”multipart/form-data” 属性的表单，没办法，只能使用form表单直接提交的方法了，但是form表单直接提交会跳转页面，这样很不友好，也不是项目需求，于是上网搜索了一番，发现可以使用隐藏的iframe来实现。

具体的原理是form表单提交到iframe里面处理，而这个iframe是隐藏的，所以提交表单的时候当前页面没有发生任何变化。

最重要的就是form的target属性指向iframe的name值，这样就实现了提交到隐藏的iframe中，那么返回值应该怎么获取呢？

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnOK").click(function () {
                var frame1 = document.getElementById("frameFile1").contentDocument; //获取到iframe里面的html元素
                var frameJson1 = JSON.parse($(frame1).find(‘pre‘).html());
                console.log(frameJson1);
            });
        });
        
    </script>
</head>
<body>
    <form method="POST" action="/Home/Upload" enctype="multipart/form-data" target=‘frameFile1‘ id="form1">
        <input type="file" name="file" id="myphoto">
        <input type="submit" value="提交">
    </form>
    <iframe name=‘frameFile1‘ id="frameFile1" style=‘display: block;‘></iframe>
    <input type="text" name="name" value=" " />
    <input type="button" id="btnOK" value="确定" />
</body>
</html>

 

以上是关于jquery如何实现form提交无刷新返回一个页面的主要内容，如果未能解决你的问题，请参考以下文章

js实现无刷新表单提交文件，将ajax请求转换为form请求方法

form 无刷新页面提交表单

使用iframe实现页面无刷新提交表单

Django使用Ajax实现页面无刷新评论回复功能

form表单提交方式

form表单提交方式