告別AJAX實現無刷新提交表單

2020-10-23 18:28:25

字體：大中小

來源：轉載

供稿：網友

通常對于無刷新提交表單，我們都是運用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" 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;
  }