欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ajax实例入门代码

程序员文章站 2022-07-05 19:29:42
静态页面 复制代码 代码如下:

静态页面

复制代码 代码如下:

<!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>
<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"]);
}