Jquery工作常用实例——Ajax load函数的使用

jQuery 的 load 函数是一种简单的(但很强大的)AJAX 函数。它的语法如下:

$(selector).load(url,data,callback),使用 selector 来定义要改变的 HTML 元素,使用 url 参数来指定数据的 web 地址。

只有当您希望向服务器发送数据时,才需要使用 data 参数。只有当您需要在执行完毕之后触发一个函数时,您才需要使用 callback 参数。

简单实例:

index.html文件:

<!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>使用$(selector).load(url)来改变HTML内容</title>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $("#button").click(function(){
   $("#changeCon").load("ajax_load.html",function(data){
    //alert(data);
   });
  })
 })
</script>
</head>

<body>
<div id="changeCon"><h2>通过Ajax load改变此处内容</h2></div>
<input type="button" id="button" value="Click me" />
</body>
</html>

ajax_load.html文件内容如下,与index.html同目录下:

<!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>ajax_load.html</title>
</head>

<body>
<h2 style="color:#FF0000">我是李云,Jquery很好用!</h2>
</body>
</html>

当我们浏览并点击按纽"click me"时,“<h2 style="color:#FF0000">我是李云,Jquery很好用!</h2>”将覆盖“<div id='changeCon'><h2>通过Ajax load改变此处内容</h2></div>”并显示出来,这就是Jquery load函数的使用,用法简单,但却能实现Ajax功能!

你可能感兴趣的:(Jquery工作常用实例)