使用ajax实现表单提交无刷新页面在项目中经常会用到。前一段时间跟着师傅学到了另外几种无刷新提交表单的方法,主要是基于iframe框架实现的。现在整理出来分享给大家。
第一种:
(html页面)
HTML Code
1.
2.
3.
4.
5.
6.
7.ul{ list-style-type:none;}
8.
9.
10.
11.
12.
13.
14.
29.
30.
31.
32.(PHP页面:form.php)
33.
34.
35.//非空验证
36.if(empty($_POST['uname']) || empty($_POST['pwd']))
37.{
38.echo '';
39.exit;
40.}
41.//验证密码
42.if($_POST['uname'] != 'jack' || $_POST['pwd'] != '123456')
43.{
44.echo '';
45.exit;
46.} else {
47.echo '';
48.exit;
49.}
第二种:
(html页面)
HTML Code
1.
2.
3.
4.
5.
6.
7.
8.
9.
14.
15.function iframeLoad(iframe){
16.var doc = iframe.contentWindow.document;
17.var html = doc.body.innerHTML;
18.if(html != ''){
19.//将获取到的json数据转为json对象
20.var obj = eval("("+html+")");
21.//判断返回的状态
22.if(obj.status < 1){
23.alert(obj.msg);
24.}else{
25.alert(obj.msg);
26.window.location.href="http://www.baidu.com";
27.}
28.}
29.}
30.
31.
32.
(PHP页面:form.php)
XML/HTML Code
1.
2.//设置时区
3.date_default_timezone_set('PRC');
4./*
5.返回的提交消息
6.status:状态
7.msg:提示信息
8.*/
9.$msg = array('status'=>0,'msg'=>'');
10.//获取提交过来的数据
11.$name = $_POST['username'];
12.$pwd = $_POST['userpwd'];
13.//模拟登录验证
14.$user = array();
15.$user['name'] = 'jack';
16.$user['pwd'] = 'jack2014';
17.if($name != $user['name']){
18.$msg['msg'] = '该用户未注册!';
19.$str = json_encode($msg);
20.echo $str;
21.exit;
22.}else if($pwd != $user['pwd']){
23.$msg['msg'] = '输入的密码错误!';
24.$str = json_encode($msg);
25.echo $str;
26.exit;
27.}
28.$msg['msg'] = '登录成功!';
29.$msg['status'] = 1;
30.$str = json_encode($msg);
31.echo $str;
以上内容是小编给大家介绍的基于HTML实现表单提交后无刷新页面的相关内容,希望对大家有所帮助!