| 标题 | 基于HTML实现表单提交后不刷新页面 |
| 内容 | 使用ajax实现表单提交无刷新页面在项目中经常会用到。前一段时间跟着师傅学到了另外几种无刷新提交表单的方法，主要是基于iframe框架实现的。现在整理出来分享给大家。 第一种： （html页面） HTML Code 1.<!DOCTYPE HTML> 2.<html lang="en-US"> 3.<head> 4.<meta charset="utf-8"> 5.<title>无刷新提交表单</title> 6.<style type="text/css"> 7.ul{ list-style-type:none;} 8.</style> 9.</head> 10.<body> 11.<iframe name="formsubmit"> 12.</iframe> 13.<!-- 将form表单提交的窗口指向隐藏的ifrmae,并通过ifrmae提交数据。 --> 14.<form action="form.php" method="POST" name="formphp" target="formsubmit"> 15.<ul> 16.<li> 17.<label for="uname">用户名：</label> 18.<input type="text" name="uname" id="uname" /> 19.</li> 20.<li> 21.<label for="pwd">密 码：</label> 22.<input type="password" name="pwd" id="pwd" /> 23.</li> 24.<li> 25.<input type="submit" value="登录" /> 26.</li> 27.</ul> 28.</form> 29.</body> 30.</html> 31. 32.（PHP页面：form.php） 33. 34.<?php 35.//非空验证 36.if(empty($_POST['uname']) || empty($_POST['pwd'])) 37.{ 38.echo '<script type="text/javascript">alert("用户名或密码为空!");</script>'; 39.exit; 40.} 41.//验证密码 42.if($_POST['uname'] != 'jack' || $_POST['pwd'] != '123456') 43.{ 44.echo '<script type="text/javascript">alert("用户名或密码不正确!");</script>'; 45.exit; 46.} else { 47.echo '<script type="text/javascript">alert("登录成功!");</script>'; 48.exit; 49.} 第二种： （html页面） HTML Code 1.<!DOCTYPE HTML> 2.<html lang="en-US"> 3.<head> 4.<meta charset="utf-8"> 5.<title>iframe提交表单</title> 6.</head> 7.<body> 8.<iframe name="myiframe" onload="iframeLoad(this);"></iframe> 9.<form action="form.php" target="myiframe" method="POST"> 10.用户名:<input type="text" name="username" /><br/> 11.密 码:<input type="password" name="userpwd" /><br/> 12.<input type="submit" value="登录" /> 13.</form> 14.<script type="text/javascript"> 15.function iframeLoad(iframe){ 16.var doc = iframe.contentWindow.document; 17.var html = doc.body.innerHTML; 18.if(html != ''){ 19.//将获取到的json数据转为json对象 20.var obj = eval("("+html+")"); 21.//判断返回的状态 22.if(obj.status < 1){ 23.alert(obj.msg); 24.}else{ 25.alert(obj.msg); 26.window.location.href="http://www.baidu.com"; 27.} 28.} 29.} 30.</script> 31.</body> 32.</html> （PHP页面：form.php） XML/HTML Code 1.<?php 2.//设置时区 3.date_default_timezone_set('PRC'); 4./* 5.返回的提交消息 6.status:状态 7.msg:提示信息 8.*/ 9.$msg = array('status'=>0,'msg'=>''); 10.//获取提交过来的数据 11.$name = $_POST['username']; 12.$pwd = $_POST['userpwd']; 13.//模拟登录验证 14.$user = array(); 15.$user['name'] = 'jack'; 16.$user['pwd'] = 'jack2014'; 17.if($name != $user['name']){ 18.$msg['msg'] = '该用户未注册!'; 19.$str = json_encode($msg); 20.echo $str; 21.exit; 22.}else if($pwd != $user['pwd']){ 23.$msg['msg'] = '输入的密码错误!'; 24.$str = json_encode($msg); 25.echo $str; 26.exit; 27.} 28.$msg['msg'] = '登录成功!'; 29.$msg['status'] = 1; 30.$str = json_encode($msg); 31.echo $str; 以上内容是小编给大家介绍的基于HTML实现表单提交后无刷新页面的相关内容，希望对大家有所帮助！ |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。