根据HTML完成表单递交后不更新网页页面

应用ajax完成表单递交无更新网页页面在新项目中常常会用到。前1段時间跟随师傅学到了此外几种无更新递交表单的方式,关键是根据iframe架构完成的。如今梳理出来共享给大伙儿。
第1种:
(html网页页面)

HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE HTML>    
  2. <html lang="en-US">    
  3. <head>    
  4. <meta charset="utf⑻">    
  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. }   


第2种:
(html网页页面)

HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE HTML>    
  2. <html lang="en-US">    
  3. <head>    
  4. <meta charset="utf⑻">    
  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)

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完成表单递交后无更新网页页面的有关內容,期待对大伙儿有一定的协助!