当前位置 博文首页 > 告别AJAX实现无刷新提交表单

最大化 缩小

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

    作者：admin 时间：2021-08-30 19:01

    通常对于无刷新提交表单，我们都是运用ajax实现的。前段时间跟着老大了解到另一种无刷新提交表单的方法。现在整理出来分享给大家。

    第一种：

    （html页面）

    复制代码 代码如下:

    <!DOCTYPE HTML>
    <html lang="en-US">
    <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" />
                </li>
                <li>
                    <label for="pwd">密  码：</label>
                    <input type="password" name="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;
      }

    jsjbwy
    上一篇：从零学CSS系列之文本属性
    下一篇：没有了