<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Ajax无刷新提交表单实例</title>
<script language="javascript">
function f1()
{
//创建xmlHttp对象
var xmlHttp;
if(window.ActiveXObject)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}
//获取表单值
var username=document.form1.username.value;
var password=document.form1.password.value;
var email=document.form1.email.value;
var datastr="username="+username+"&password="+password+"&email="+email;
var url="http://localhost/test.php";
//提交数据
xmlHttp.open("POST",url,false);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send(datastr);
document.getElementById("d1").innerHTML="表单已提交";
}
</script>
</head>
<body>
<div align="center">
用户登录
<div id="d1">
</div>
<form id="form1" name="form1" method="post" action="">
<table width="500" border="1" cellspacing="0" cellpadding="5">
<tr>
<td colspan="2" align="center" bgcolor="#CCCCCC"><strong>用户登录</strong></td>
</tr>
<tr>
<td width="101" align="right">用户名：</td>
<td width="393" align="left"><label>
<input type="text" name="username" />
</label></td>
</tr>
<tr>
<td align="right">密码：</td>
<td align="left"><label>
<input type="text" name="password" />
</label></td>
</tr>
<tr>
<td align="right">邮箱：</td>
<td align="left"><label>
<input type="text" name="email" />
</label></td>
</tr>
<tr>
<td align="right"> </td>
<td align="left"><label>
<input type="button" name="Submit" onclick="f1()" value="提交" />
<input type="reset" name="Submit2" value="重置" />
</label></td>
</tr>
</table>
</form>
</div>
</body>
</html>
时间： 2024-10-13 21:33:02