html5页面切换并返回值,html中提交表单并实现不跳转页面处理返回值

本文中实现在html中使用jquery的组件实现表单提交并在当前页面中处理返回值。

1、使用AjaxForm方式

(1)、导入js文件

需要导入相关的js文件。使用ajaxForm方式需要使用到jquery和jquery-form两个js文件。如：

(2)、绑定表单

表单绑定它一般在$(document).ready(function () {}里定义，它能让表单不刷新页面的情况下POST到目标。如：

$(document).ready(function() {

$("#formLogin").ajaxForm(function(data){

alert("post success." + data);

//Alert("post success.");

});

});

formLogin为表单的id。

(3)、编写表单提交代码

如下为一个简单的表单，提交地址为userLogin.shtml，成功和失败都会返回json数据包，数据包在上面绑定的方法中处理。

用户登录

(4)、运行效果

2、使用jquery提供的get/post方法

(1)、引入js文件

使用jquery需要引入jquery的相关js文件，如：

(2)、js中使用jquery进行提交并处理返回结果

如下使用post提交数据到resource.shtml页面，参数action和id，返回一个json数据，通过判断json数据中result字段做相应处理。

3、使用隐藏iframe

使用隐藏的iframe的页面加载回调获取提交返回值，涉及到同域名和不同域名，这里先实现相同域名中使用iframe获取返回值并做相应处理。先看下面的例子：

这是标题

点击标题，会提示出它的值。

关键点：

(1)、一个带id和name的隐藏的iframe,name用于from指定跳转目标使用，id用于js中操作该控件。指定了宽和高为1px用以避免某些浏览器直接不加载该iframe组件。指定style使得iframe不可见。

(2)、将form表单的target指定iframe的name，表单提交后将跳转到该iframe；

(3)、给from设置提交回调函数，该回调函数用于后续区分是否是提交导致的iframe加载回调；

(4)、在document加载完毕(ready)中获取并设置from的onload回调，如果在外面获取可能获取到的控件为null；

(5)、页面加载时也会回调iframe的加载函数，所以需要设定一个标志位用于记录是否是提交导致的回调。

4、使用ajaxSubmit提交

在表单的submit方法中调用ajaxSubmit进行提交，在提交前还可以在哪submit中对数据进行修改。ajaxSubmit的使用详细请自行查阅。如下为一个简单例子：

用户登录

用户登录

上述例子实现一个简单的登录表单，表单使用jquery validate进行表单验证，在form提交前使用md5对密码进行加密并将加密结果写入到一个隐藏的input中，然后再调用ajaxSubmit进行提交。提交成功之后会将页面重定向到一个传入的参数页面。失败时使用noty弹出一个提示对话框。demo可以自行修改验证。运行失败效果如下，成功时会定向到新页面。