初学jquery2

最新推荐文章于 2025-12-11 21:57:31 发布

原创最新推荐文章于 2025-12-11 21:57:31 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了jQuery中$.ajax()与load()函数的基本用法，并通过实例演示了如何利用这两个函数更新网页中的HTML元素内容。load()函数因其实现简单而更受欢迎。

练习使用 $.ajax() 函数和 load() 函数。

load() 函数是简单的功能强大的函数。

格式为：

$(selector).load(url,data,callback)

selector 为要改变的 html 元素， url 为指定数据的地址。

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

$.ajax(options) 是低层级 AJAX 函数的语法。

option 参数设置的是 name|value 对，定义 url 数据、密码、数据类型、过滤器、字符集、超时以及错误函数。

下面用分别用了两个函数来改变页面中的文本。代码如下：

<html>
<head>
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#b01").click(function(){
  var htmlobj=$.ajax({url:"test.txt",async:false});
  $('#myDiv1').html(htmlobj.responseText);
  $('#myDiv2').load('test.txt'); 
  });
});
</script>
</head>
<body>

<div id="myDiv1"><h2>通过 $.ajax 函数改变文本</h2></div>
<div id="myDiv2">通过load函数改变文本</div>
<button id="b01" type="button">改变内容</button>

</body>
</html>

明显看出load函数更加简洁。