• 技术文章 >web前端 >css教程

    告别AJAX实现无刷新提交表单

    PHPzhongPHPzhong2019-01-04 14:05:04原创1146
    通常对于无刷新提交表单,我们都是运用ajax实现的。前段时间跟着老大了解到另一种无刷新提交表单的方法。现在整理出来分享给大家。

    第一种:

    (html页面)

    代码如下:

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <title>无刷新提交表单</title>
        <style type="text/css">
            ul{ list-style-type:none;}
        </style>
    </head>
    <body>
        <iframe name="formsubmit" style="display:none;">
        </iframe>
        <!-- 将form表单提交的窗口指向隐藏的ifrmae,并通过ifrmae提交数据。 -->
        <form action="form.php" method="POST" name="formphp" target="formsubmit">
           <ul>
                <li>
                    <label for="uname">用户名:</label>
                    <input type="text" name="uname" id="uname" />
                </li>
                <li>
                    <label for="pwd">密  码:</label>
                    <input type="password" name="pwd" id="pwd" />
                </li>
                <li>
                    <input type="submit" value="登录" />
                </li>
           </ul>
        </form>
    </body>
    </html>

    第二种:

    (php页面)

    代码如下:

    <?php
      //非空验证
      if(empty($_POST['uname']) || empty($_POST['pwd']))
      {
        echo '<script type="text/javascript">alert("用户名或密码为空!");</script>';
        exit;
      }
      //验证密码
      if($_POST['uname'] != 'jack' || $_POST['pwd'] != '123456')
      {
        echo '<script type="text/javascript">alert("用户名或密码不正确!");</script>';
        exit;
      } else {
        echo '<script type="text/javascript">alert("登录成功!");</script>';
        exit;
      }
    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:无刷新 html
    上一篇:归纳总结CSS中背景设置与文本外观属性 下一篇:如何用css制作一个能够兼容所有浏览器的三角形
    大前端线上培训班

    相关文章推荐

    • 聊聊css为什么需要模块化?怎么进行模块化?• css调用方法是什么• css怎么去除表格边框• uniapp开发饿了么微信小程序首页sticky粘性定位布局• 怎么看网页css

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网