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

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


1、使用AjaxForm方式

(1)、导入js文件

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

	<script type="text/javascript" src="http://127.0.0.1/CarAppStore/js/jquery/jquery-1.9.0.min.js"></script>	
	<script type="text/javascript" src="http://127.0.0.1/CarAppStore/js/jquery/jquery-form.js"></script>	

(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数据包,数据包在上面绑定的方法中处理。

		<form id="formLogin" name="formLogin" action="userLogin.shtml" method="post">
			<h1>用户登录</h1>
			<div>
				<input type="text" placeholder="用户名" required="" id="username" name="account"/>
			</div>
			<div>
				<input type="password" placeholder="密码" required="" id="password" name="passwd"/>
			</div>
			<div class="">
				<span class="help-block u-errormessage" id="js-server-helpinfo"> </span>
			</div> 			
			<div>
				<!-- <input type="submit" value="Log in" /> -->
				<input type="submit" value="登录" class="btn btn-primary" id="js-btn-login" style="float: left;"/>		
				<input type="button" value="重置" class="btn btn-primary" id="js-btn-login" style="float: right;" οnclick="doReset();"/>
			</div>
		</form>



(4)、运行效果




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

(1)、引入js文件

使用jquery需要引入jquery的相关js文件,如:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>	

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

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

<script type="text/javascript">	 
        function deleteResource(id)  {
		    $("#div_edit").hide();
			$.post("resource.shtml", {
				action : "delete",
				id : id,
			}, function(data) {
			    var obj = new Function("return" + data)();
			    if(obj.result=="ok")  {
			       location.reload();
			    }	
			    else {
			       $.noty.consumeAlert({layout: 'topCenter', type: 'error', dismissQueue: true});
			       alert(obj.message);
			    }	
			});	
		}
</script>


3、使用隐藏iframe

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

<html>
	<head>
        <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>	
		<!-- 处理iframe回调的代码块 -->
		<script type="text/javascript">
		    var handlerFlag = 0;
				
			function setOnloadCallBask(obj, event, handler) {		
			    //for most explores
				if (null != obj && null != obj.addEventListener) { 
					obj.addEventListener(event, handler, false); 
				} 
				//for IE
				else if (null != obj && null != obj.attachEvent) {
					obj.attachEvent('on'+event, handler); 
				} 
				//not support
				else {
					//选择dom元素错误
					throw new Error('不支持该dom元素');
				}
			} 	
			/*
			*call back.
			*/
			function ActionHandler()  {
			     //alert("call");
				 //文档加载或刷新时也会调用,因此需要通过标志位控制,提交时将标志位置为1,在这里处理之后修改标志位为0
			    if(0 != handlerFlag)  {
				    //do action
					alert("123123");
					var value = document.getElementById("ifActionResult").contentWindow.document.body.innerHTML;
                                        if(null!=value)  {
                                             var obj = eval("("+value+")");  
                                             if(obj.result=="ok")  {
                                                top.document.location.href="resource.shtml";
                                             }    
                                             else {
                                                window.parent.doNotice(obj.message);                 
                                             }
                                        }
                                        //update flag.
					handlerFlag = 0;
				}
			}	
			
			function sub()  {
				handlerFlag = 1;
			}									
		</script>
		<!-- 处理其他功能的代码块 -->
		<script type="text/javascript">
			$(document).ready(function()  {
			    //注意这里最好在文档加载完成的时候再获取元素,否则可能获取到的一直是null
				setOnloadCallBask(document.getElementById("ifActionResult"),'load',ActionHandler);		
			});			
		</script>
	</head>
	<body>	
		<h1 id="myHeader">这是标题</h1>
		<p>点击标题,会提示出它的值。</p>	
		<iframe id="ifActionResult" name="ifTmp" width="1px" height="1px" style="display: none;"></iframe>
		<form action="" target="ifTmp">
		   <input type="submit" onClick="sub();" value="测试"/>
		</form>
	</body>
</html>

关键点:

(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的使用详细请自行查阅。如下为一个简单例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>用户登录</title>
	<link rel="stylesheet" type="text/css" href="/CarAppStore/css/login/style.css" />
	<link rel="stylesheet" type="text/css" href="/CarAppStore/css/login/body.css"/>
	
    <script type="text/javascript" src="/CarAppStore/js/jquery/jquery-1.9.0.min.js"></script>	    
	<script type="text/javascript" src="/CarAppStore/js/jquery/jquery-form.js"></script>	
	<script type="text/javascript" src="/CarAppStore/js/jquery/jquery-validate.js"></script>	
    <script type="text/javascript" src="/CarAppStore/js/noty/packaged/jquery.noty.packaged.min.js"></script>	
    <script type="text/javascript" src="/resource/rcs/safe/md5.js"></script>    
	<script type="text/javascript">
	 $(document).ready(function() {
		   var url="manage/updater.shtml";
		   var baseRef = window.location.href;
		   var aa = baseRef.indexOf("=");
		   if(0 < aa)  {
		       url=baseRef.substring(aa+1);
		   }	 	 
		   //ajax submit.
		   $("#formLogin").submit(function()  {
		      var tmp = hex_md5($("#password").val());
		      $("#txt_passwd").val(tmp);
		      $(this).ajaxSubmit({
			      success: function(data) { // data 保存提交后返回的数据,一般为 json 数据
		              var obj = eval("("+data+")");  
					  if(obj.result=="ok")  {
					     window.location.assign(url);
					  }	
					  else {
	                     $.noty.consumeAlert({layout: 'top', type: 'error', dismissQueue: true,timeout:2000});
	                     alert("登录失败,请重试!");				     
					  }
	              }
		      });  
		      return false;
		   });	           
	 });	
    </script>
</head>
<body>
<div class="container">
	<section id="content">
		<form id="formLogin" name="formLogin" action="userLogin.shtml" method="post" target="fmResult">
			<h1>用户登录</h1>
			<div>
				<input type="text" placeholder="用户名" required="" id="username" name="account"/>
			</div>
			<div>
				<input type="password" placeholder="密码" required="" id="password" name="password"/>
			</div>
			<div class="">
				<span class="help-block u-errormessage" id="js-server-helpinfo"> </span>
			</div> 			
			<div>
				<input type="submit" value="登录" class="btn btn-primary" id="js-btn-login" style="float: left;"/>		
				<input type="reset" value="重置" class="btn btn-primary" id="js-btn-login" style="float: right;"/>
			</div>
			<div>
			   <input type="hidden" id="txt_passwd" name="passwd"/>
			</div>
		</form>
	</section><!-- content -->
	<div>
	   <iframe width="1px" height="1px" name="fmResult" style="display: none;"></iframe>
	</div>
</div>
<!-- container -->
</body>
</html>

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



  • 14
    点赞
  • 50
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在 Flask ,可以通过视图函数的返回值实现页面跳转。具体方法如下: 1. 在 Flask ,可以使用 render_template 函数来渲染模板,该函数的返回值是一个 HTML 页面的字符串,可以直接返回给客户端进行渲染。 2. 如果需要跳转到另一个页面,可以使用 redirect 函数来实现。该函数的参数是一个 URL,表示要跳转到的页面的地址。该函数的返回值是一个特殊的响应对象,告诉客户端要跳转到指定的页面。 下面是一个示例代码,演示如何在 Flask 实现页面跳转: ```python from flask import Flask, render_template, redirect, url_for app = Flask(__name__) @app.route('/') def index(): # 渲染 index.html 模板 return render_template('index.html') @app.route('/login', methods=['GET', 'POST']) def login(): if request.method == 'POST': # 处理表单提交数据 username = request.form['username'] password = request.form['password'] # 验证用户信息 if check_user(username, password): # 用户验证通过,跳转到主页 return redirect(url_for('index')) else: # 用户验证失败,重新显示登录页面 return render_template('login.html', error='用户名或密码错误') else: # 显示登录页面 return render_template('login.html') ``` 在上面的示例,当用户提交登录表单时,如果用户信息验证通过,则使用 redirect 函数跳转到主页;如果用户信息验证失败,则重新显示登录页面,并在页面显示错误信息。 在模板,可以使用 Jinja2 的语法来生成跳转链接,例如: ```html <a href="{{ url_for('login') }}">登录</a> ``` 上面的代码会生成一个指向 `/login` 路径的链接,该链接会跳转到 login 视图函数所对应的页面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值