使用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>
<!--将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页面：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/HTMLCode复制内容到剪贴板
<?php
//设置时区
date_default_timezone_set('PRC');
/*
返回的提交消息
status:状态
msg:提示信息
*/
$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;
本文转载自中文网
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h55007.shtml
