ajax实例入门代码

作者: 吃饱了闲的
来源: 51数据库
2021-09-21

静态页面

复制代码代码如下:

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 
<html xmlns="http://www.51sjk.com/Upload/Articles/1/0/270/270343_20210708034151685.jpg" > 
<head> 
<title>无标题页</title> 
<script type="text/javascript" src="jquery/jquery.js" > 
//这里不可以用<script type="" src="" /> 
</script> 
<script type="text/javascript"> 
/* 
encodeuri 方法 
对url传递的参数进行编码 
将文本字符串编码为一个有效的统一资源标识符 (uri)。 
*/ 
function createquerystring(){ 
var firstname=encodeuri($("#firstname").val()); 
var birthday=encodeuri($("#birthday").val()); 
//组合成对象的形式 
var querystring={firstname:firstname,birthday:birthday}; 
return querystring; 
} 
function dorequestusingget(){ 
$.get("ajaxserve.aspx",createquerystring(), 
//发送get请求 
function(data){ 
$("#serverresponse").html(decodeuri(data)); 
} 
); 
} 
function dorequestusingpost(){ 
$.post("ajaxserve.aspx",createquerystring(), 
//发送post请求 
function(data){ 
$("#serverresponse").html(decodeuri(data)); 
} 
); 
} 
</script> 
</head> 
<body> 
<h2>输入姓名和生日</h2> 
<form> 
<input type="text" id="firstname" /><br /> 
<input type="text" id="birthday" /> 

<input type="button" value="get" onclick="dorequestusingget();" /><br /> 
<input type="button" value="post" onclick="dorequestusingpost();" /> 
</form> 
<div id="serverresponse"></div> 
</body> 
</html> 

动态页面

复制代码代码如下:

protected void page_load(object sender, eventargs e) 
{ 
//response.write("后台数据"); 
if (request.httpmethod == "post") 
response.write("post:" + request["firstname"] + ",your birthday is" + request["birthday"]); 
else if(request.httpmethod=="get") 
response.write("get:" + request["firstname"] + ",your birthday is" + request["birthday"]); 
}