您现在的位置是：网站首页> 编程资料编程资料

基于HTML实现表单提交后不刷新页面 Html5无刷新修改browser Url的方法详解HTML5之pushstate、popstate操作history,无刷新改变当前urlHTML5无刷新改变当前url的代码HTML5 History API 实现无刷新跳转 仿163网盘无刷新文件上传 for Php HTML网页中无刷新的更换CSS样式-CSS教程-网页制作-网页教学网HTML5实现无刷新修改URL的方法

2023-10-09 410人已围观

简介 使用ajax实现表单提交无刷新页面在项目中经常会用到。前一段时间跟着师傅学到了另外几种无刷新提交表单的方法，主要是基于iframe框架实现的。现在小编整理特此分享平台供大家参考

使用ajax实现表单提交无刷新页面在项目中经常会用到。前一段时间跟着师傅学到了另外几种无刷新提交表单的方法，主要是基于iframe框架实现的。现在整理出来分享给大家。
第一种：
（html页面）
HTML Code复制内容到剪贴板
  1.     
  2. "en-US">    
  3.     
  4. "utf-8">    
  5. 无刷新提交表单    
  6. "text/css">    
  7. ul{ list-style-type:none;}    
  8.     
  9.     
  10.     
  11. "formsubmit" style="display:none;">    
  12.     
  13.     
  14. "form.php" method="POST" name="formphp" target="formsubmit">    
    15.     
    •     
    • for="uname">用户名：    
    • "text" name="uname" id="uname" />    
      •     
    •     
    • for="pwd">密 码：    
    • "password" name="pwd" id="pwd" />    
      •     
    •     
    • "submit" value="登录" />    
      •     
        
  16.     
  17.     
  18.     
  19.   
  20. （PHP页面：form.php）    
  21.   
  23. //非空验证    
  24. if(empty($_POST['uname']) || empty($_POST['pwd']))    
  25. {    
  26. echo 'alert("用户名或密码为空!");';    
  27. exit;    
  28. }    
  29. //验证密码    
  30. if($_POST['uname'] != 'jack' || $_POST['pwd'] != '123456')    
  31. {    
  32. echo 'alert("用户名或密码不正确!");';    
  33. exit;    
  34. } else {    
  35. echo 'alert("登录成功!");';    
  36. exit;    
  37. }   


第二种：
（html页面）

HTML Code复制内容到剪贴板
  1.     
  2. "en-US">    
  3.     
  4. "utf-8">    
  5. iframe提交表单    
  6.     
  7.     
  8. "myiframe" style="display:none;" onload="iframeLoad(this);">    
  9. "form.php" target="myiframe" method="POST">    
  10. 用户名:"text" name="username" />
        
  11. 密 码:"password" name="userpwd" />
        
  12. "submit" value="登录" />    
  13.     
  14. "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.     
  31.     
  32.    

（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'=>'');    提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：HTML简单购物数量小程序 HTML绘制用户注册页面浅谈html5增强的页面元素SCSS移动端页面遮罩层效果的实现及常见问题解决CSS3解决移动页面上点击链接触发色块的问题 CSS的margin属性在页面布局中的使用攻略HTML5实现页面切换激活的PageVisibility API使用初探Html制作简单而漂亮的登录页面Div+CSS仿支付宝登录页面基于meta实现页面的定时刷新或跳转 如何让一个div居于页面正中间【实现方法】

    下一篇：天天爱消除特殊动物有什么用 天天爱消除特殊动物的详细介绍_手机游戏_游戏攻略_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网