zl程序教程

您现在的位置是:首页 >  前端

当前栏目

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

AJAX 实现 提交 表单 刷新 告别
2023-06-13 09:15:26 时间

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

第一种:

(html页面)

复制代码代码如下:


<!DOCTYPEHTML>
<htmllang="en-US">
<head>
   <metacharset="utf-8">
   <title>无刷新提交表单</title>
   <styletype="text/css">
       ul{list-style-type:none;}
   </style>
</head>
<body>
   <iframename="formsubmit"style="display:none;">
   </iframe>

   <!--将form表单提交的窗口指向隐藏的ifrmae,并通过ifrmae提交数据。-->
   <formaction="form.php"method="POST"name="formphp"target="formsubmit">
      <ul>
           <li>
               <labelfor="uname">用户名:</label>
               <inputtype="text"name="uname"id="uname"/>
           </li>
           <li>
               <labelfor="pwd">密 码:</label>
               <inputtype="password"name="pwd"id="pwd"/>
           </li>
           <li>
               <inputtype="submit"value="登录"/>
           </li>
      </ul>
   </form>
</body>
</html>

(PHP页面)

复制代码代码如下:


<?php
 //非空验证
 if(empty($_POST["uname"])||empty($_POST["pwd"]))
 {
   echo"<scripttype="text/javascript">alert("用户名或密码为空!");</script>";
   exit;
 }

 //验证密码
 if($_POST["uname"]!="jack"||$_POST["pwd"]!="123456")
 {
   echo"<scripttype="text/javascript">alert("用户名或密码不正确!");</script>";
   exit;
 }else{
   echo"<scripttype="text/javascript">alert("登录成功!");</script>";
   exit;
 }