基于HTML实现表单提交后不刷新页面

时间：2021-05-08

使用ajax实现表单提交无刷新页面在项目中经常会用到。前一段时间跟着师傅学到了另外几种无刷新提交表单的方法，主要是基于iframe框架实现的。现在整理出来分享给大家。
第一种：
（html页面）
HTMLCode复制内容到剪贴板

<!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>

<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页面：form.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;

}

第二种：
（html页面）

HTMLCode复制内容到剪贴板

<!DOCTYPEHTML>

<htmllang="en-US">

<head>

<metacharset="utf-8">

<title>iframe提交表单</title>

</head>

<body>

<iframename="myiframe"style="display:none;"onload="iframeLoad(this);"></iframe>

<formaction="form.php"target="myiframe"method="POST">

用户名:<inputtype="text"name="username"/><br/>

密码:<inputtype="password"name="userpwd"/><br/>

<inputtype="submit"value="登录"/>

</form>

<scripttype="text/javascript">

functioniframeLoad(iframe){

vardoc=iframe.contentWindow.document;

varhtml=doc.body.innerHTML;

if(html!=''){

//将获取到的json数据转为json对象

varobj=eval("("+html+")");

//判断返回的状态

if(obj.status<1){

alert(obj.msg);

}else{

alert(obj.msg);

window.location.href="http://www.baidu.com";

}

</script>

</body>

</html>

（PHP页面：form.php）

XML/HTML Code复制内容到剪贴板

<?php

//设置时区

date_default_timezone_set('PRC');

$msg=array('status'=>0,'msg'=>'');

//获取提交过来的数据

$name=$_POST['username'];

$pwd=$_POST['userpwd'];

//模拟登录验证

$user=array();

$user['name']='jack';

$user['pwd']='jack2014';

if($name!=$user['name']){

$msg['msg']='该用户未注册!';

$str=json_encode($msg);

echo$str;

exit;

}elseif($pwd!=$user['pwd']){

$msg['msg']='输入的密码错误!';

$str=json_encode($msg);

echo$str;

exit;

}

$msg['msg']='登录成功!';

$msg['status']=1;

$str=json_encode($msg);

echo$str;

以上内容是小编给大家介绍的基于HTML实现表单提交后无刷新页面的相关内容，希望对大家有所帮助！

基于HTML实现表单提交后不刷新页面

相关文章

利用ajax提交form表单到数据库详解(无刷新)

jQuery基于Ajax方式提交表单功能示例

Struts2实现生成动态验证码并验证实例代码

springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项

ajax跨页面提交表单