1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>$.ajax()方法发送请求</title> 5 <script type="text/javascript" 6 src="Jscript/jquery-1.4.2-vsdoc.js"> 7 </script> 8 <script type="text/javascript" 9 src="Jscript/jquery-1.4.2.js"> 10 </script> 11 <style type="text/css"> 12 body{font-size:13px} 13 .divFrame{width:225px;border:solid 1px #666} 14 .divFrame .divTitle{padding:5px;background-color:#eee;height:23px} 15 .divFrame .divTitle span{float:left;padding:2px;padding-top:5px;} 16 .divFrame .divContent{padding:8px;text-align:center} 17 .divFrame .divContent .clsShow{font-size:14px;line-height:2.0em} 18 .divFrame .divContent .clsShow .clsError{font-size:13px;border:solid 1px #cc3300;padding:2px;display:none;margin-bottom:5px;background-color:#ffe0a3} 19 .txt{border:#666 1px solid;padding:2px;width:150px;margin-right:3px} 20 .btn {border:#666 1px solid;padding:2px;width:50px; 21 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);} 22 </style> 23 <script type="text/javascript"> 24 $(function() { 25 $.ajax({ //请求登录页 26 url: "login.html", //登录静态页 27 dataType: "html", 28 success: function(HTML) { //返回页面内容 29 $("#frmUserLogin").html(HTML); //将页面内容置入表单 30 $("#btnLogin").click(function() { //“登录”按钮单击事件 31 //获取用户名称 32 var strTxtName = encodeURI($("#txtName").val()); 33 //获取输入密码 34 var strTxtPass = encodeURI($("#txtPass").val()); 35 //开始发送数据 36 $.ajax({ //请求登录处理页 37 url: "login.aspx", //登录处理页 38 dataType: "html", 39 //传送请求数据 40 data: { txtName: strTxtName, txtPass: strTxtPass }, 41 success: function(strValue) { //登录成功后返回的数据 42 //根据返回值进行状态显示 43 if (strValue == "True") { 44 $(".clsShow").html("操作提示,登录成功!"); 45 } 46 else { 47 $("#divError").show().html("用户名或密码错误!"); 48 } 49 } 50 }) 51 }) 52 } 53 }) 54 }) 55 </script> 56 </head> 57 <body> 58 <form id="frmUserLogin"></form> 59 </body> 60 </html>
login.htm
<div class="divFrame"> <div class="divTitle"> <span>用户登录</span> </div> <div class="divContent"> <div class="clsShow"> <div id="divError" class="clsError"></div> <div>名称:<input id="txtName" type="text" class="txt" /></div> <div>密码:<input id="txtPass" type="password" class="txt" /></div> <div> <input id="btnLogin" type="button" value="登录" class="btn" />   <input id="btnReset" type="reset" value="取消" class="btn" /> </div> </div> </div> </div>