用jQuery和ajax（两例）获得远方服务器数据-优快云博客

本文介绍了一个简单的登录页面实现方法，通过Ajax与jQuery进行前后端交互，完成用户验证流程。文章展示了如何使用HTML与JavaScript搭建登录界面，并通过Ajax发送用户输入的数据到服务器端进行验证。

login.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>登陆页面</title>
</head>
<script src="jquery-latest.js"></script>
//在网页加载时运行
<body>

<div id="a"></div>
<table>
<tr>
<td>
用户名:
</td>
<td>
<input type"text" id="name" />
</td>
</tr>
<tr>
<td>
密码:
</td>
<td>
<input type="password" id="pwd">
</td>
</tr>
<tr>
<td>
<a onClick="ShowChild('psc_id')" id="kk" style="cursor:hand;" >登陆</a>
</td>
</tr>
</table>
<div id="psc_id"><div>
使用jQuery运行
<!--
<script language="javascript" type="text/javascript">
function jq()
{
userName = $("#name").val();
password = $("#pwd").val();
//alert(userName+password);
//$.ajax({url: "login1.asp",
// type:"post",
//dataType:"html",
// data:"name="+userName+"&pwd="+password,
// success:function(msg){
// window.location.href=msg;
//}
//});
$.get(    "login1.asp",
           { name: "ddd", pwd: "ddd" },
            function(data){ alert("Data Loaded: " + data); }
        )

//$("#a").load("delete.aspx?bj_id=1",function(){alert('cg');});//向delete.aspx?bj_id=1页面发出请求，将返回结果装入id为a的内容中，然后再执行函数callback。

}
</script>
-->


<!--<script>
function CreateXMLHttpRequest()
{
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
xmlHttp = new XMLHttpRequest();
}
}
function ShowChild(id)
{
var name,pwd;
name=document.getElementById("name").value;
pwd=document.getElementById("pwd").value;
CreateXMLHttpRequest();
if(xmlHttp)
{
xmlHttp.open('POST','login1.asp',true);
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
var SendData = 'name='+name+'&pwd='+pwd;
xmlHttp.send(SendData);
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
   if(xmlHttp.status==200)
   {
   document.getElementById(id).innerHTML = xmlHttp.responseText;
   }
   else
   {
   document.getElementById(id).innerHTML='出错：'+xmlHttp.statusText;
   }
}
else
{
   document.getElementById(id).innerHTML="正在提交数据...";
}
}
}
else
{
document.getElementById(id).innerHTML='抱歉，您的浏览器不支持XMLHttpRequest，请使用IE6以上版本！';
}
}

</script>
-->
</body>
</html>
login1.asp
<%
Response.ContentType = "application/x-www-form-urlencoded'"
Response.Charset = "GB2312" '只有这样才能返回汉字
a=request("name")
b=request("pwd")
if a="ddd" and b="ddd" then
response.Write("http://www.cdanju.com/")
else
%>
<form>
<input type="text">
</form>
'response.write("失败了！再来")
<%
response.Write("成功来源于一次次的失败")
end if
%>