• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    基于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" 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页面）

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

    上一篇：HTML九宫格布局实现方法
    下一篇：使用语义化标签去写你的HTML 兼容IE6,7,8
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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