jquery $.ajax入门应用二

  前台

  

复制代码 代码如下:

  <!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>

  <style type="text/css">

  .show{ display:block;}

  .hide{ display:none;}

  </style>

  <script type="text/javascript" src="jquery/jquery-1.2.6.js"></script>

  <script type="text/javascript">

  //这个方法把ajax方法封装一下,方便调用。

  function myajax(){

  $.ajax({

  type:'get',

  url:'ajax.aspx',

  data:'id=1name=tree',

  dataType:'html',

  beforeSend:beforecall,

  success:callback

  });

  }

  //调用前方法

  function beforecall(){

  $('#wait').addClass("show").append('调出中...');

  //alert('');//测试是否调用

  }

  //回调函数

  function callback(data){

  $('#response').append(data);

  $('#wait').css("display","none");

  }

  //onload()事件

  $(function(){

  $('#confirm').click(myajax);

  })

  </script>

  </head>

  <body>

  <div id="confirm">点击</div>

  <div id="response">接收后台数据</div>

  <div id="wait" class="hide">hello</div>

  </body>

  </html>

  后台

  

复制代码 代码如下:

  protected void Page_Load(object sender, EventArgs e)

  {

  Response.Write("hello"+Request["name"]);

  Response.End();

  }