基于HTML实现表单提交后不刷新页面

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" style="display:none; ">     
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页面）

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" style="display:none; " 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）

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实现表单提交后无刷新页面的相关内容，希望对大家有所帮助！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！