jQery ajax——load()方法示例介绍

  一.load()方法(最简单的)

  load(url,[data],[callback])

  url:加载的页面地址

  data: 可选项,发送到服务器的数据,格式是key/value

  callback:可选项,回调函数

  1.最简单的应用

  

复制代码 代码如下:

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

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>load方法应用</title>

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

  <style type="text/css">

  #divframe{ border:1px solid #999; width:500px; margin:0 auto;}

  .loadTitle{ background:#CCC; height:30px;}

  </style>

  <script type="text/javascript">

  $(function(){

  $("#btn").click(function(){

  //加载整个页面

  //$("#ajaxTip").load("inclue_a.html");

  //加载页面中的某一元素

  $("#ajaxTip").load("inclue_a.html #userinfo");

  })

  })

  </script>

  </head>

  <body>

  <div id="divframe">

  <div class="loadTitle">

  <input type="button" value="获取数据" id="btn"/>

  </div>

  <div id="ajaxTip">

  </div>

  </div>

  </body>

  </html>

  其中inclue_a.html的代码如下:

  

复制代码 代码如下:

  <div id="userinfo">

  姓名:冰淇淋<br>

  性别:田<br>

  邮箱:[email protected]

  </div>

  显示结果:

jQery ajax——load()方法示例介绍

  点击按钮显示如下:

jQery ajax——load()方法示例介绍

  二.get()方法

  三.post()方法

  四.ajax()方法