18910140161

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

顺晟科技

2021-06-16 10:21:40

213

使用创建交互式、快速动态网页应用的网页开发技术实现表单提交无刷新页面在项目中经常会用到。前一段时间跟着师傅学到了另外几种无刷新提交表单的方法,主要是基于内联框架框架实现的。现在整理出来分享给大家。

种:

(html页面)

超链接代码复制内容到剪贴板

!DOCTYPEHTML

htmllang='en-US '

metacharset='utf-8 '

标题无刷新提交表单/title

styletype='text/css '

ul { list-style-type : none;}

/style

/head

身体

iframename=' form submit ' style=' display : none;'

/iframe

!-将形式表单提交的窗口指向隐藏的ifrmae,并通过ifrmae提交数据。 -

form action=' form。PHP ' method=' POST ' name=' form PHP ' target=' form submit '

保险商实验所

labelfor='uname '用户名:/label

输入类型=' text ' name=' uname ' id=' uname '/

/li

labelfor='pwd '密码:/label

输入类型=' password ' name=' pwd ' id=' pwd '/

/li

inputtype='submit'value='登录'/

/li

/ul

/form

/body

/html

(PHP页面:form.php)

?服务器端编程语言(专业超文本预处理器的缩写)

//非空验证

if(空($ _ POST[' uname '])| |空($_POST['pwd']))

{

echo ' script type=' text/JavaScript ' alert('用户名或密码为空!');/script ';

退出;

}

//验证密码

if($_POST['uname']!='jack'||$_POST['pwd']!='123456')

{

echo ' script type=' text/JavaScript ' alert('用户名或密码不正确!');/script ';

退出;

}else{

echo ' script type=' text/JavaScript ' alert('登录成功!');/script ';

退出;

}

第二种:

(html页面)

超链接代码复制内容到剪贴板

!DOCTYPEHTML

htmllang='en-US '

metacharset='utf-8 '

titleiframe提交表单/title

/head

身体

iframename=' my iframe ' style=' display : none;onload=' IFrameLoad(this);/iframe

form action=' form。PHP ' target=' my iframe '方法=' POST '

用户名:输入类型=' text ' name=' username '/br/

密码:输入类型='密码'名称=' userpwd '/br/

inputtype='submit'value='登录'/

/form

scripttype='text/javascript '

functioniframeLoad(iframe){

var doc=iframe。ContentWiNDOW。文件;

var html=doc。尸体。innerhtml

if(html!=''){

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

var obj=eval('(' html ')');

//判断返回的状态

if(obj.status1){

警惕味精);

}else{

警惕味精);

窗户。位置。href=' http://www .百度。com ';

}

}

}

/script

/body

/html

(PHP页面:form.php)

XML/HTMLCode复制内容到剪贴板

?服务器端编程语言(专业超文本预处理器的缩写)

//设置时区

date _ default _ time zone _ set(' PRC ');

/*

返回的提交消息

status:状态

msg:提示信息

*/

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

//获取提交过来的数据

$ name=$ _ POST[' username '];

$ pwd=$ _ POST[' user pwd '];

//模拟登录验证

$ user=array();

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

$ user[' pwd ']=' jack 2014 ';

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

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

$ str=JSON _ encode($ msg);

echo $ str

退出;

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

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

$ str=JSON _ encode($ msg);

echo $ str

退出;

}

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

$ msg[' status ']=1;

$ str=JSON _ encode($ msg);

echo $ str

本文转载自中文网

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航