jquery+ajax小例子。

最新推荐文章于 2022-04-12 22:02:27 发布

wuapeng

最新推荐文章于 2022-04-12 22:02:27 发布

阅读量537

点赞数

分类专栏： JAVA

JAVA 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

demo_test.txt内容如下：

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

jquery-1.8.0.min.js：

是下载的jquery。

1、点击后：test的内容则会被替换jQuery and AJAX is FUN!!! This is some text in a paragraph.

<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-1.8.0.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$('#test').load('ajaxfile/demo_test.txt');
})
})
</script>
</head>

<body>

<h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部的内容</button>

</body>
</html>

2、点击后：div的内容则会被替换This is some text in a paragraph.

<div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div>
<button>获得外部内容</button>

</body>
</html>

3、

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示“外部内容加载成功！”，而如果失败，则显示错误消息：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
    $("#div1").load("/example/jquery/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功！");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
});
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div>
<button>获得外部内容</button>

</body>
</html>

wuapeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery+ajax小例子。

点击后：test的内容则会被替换 $(document).ready(function(){ $("#btn1").click(function(){ $('#test').load('ajaxfile/demo_test.txt'); })})请点击下面的按钮，通过 jQuery AJAX 改变这段文本。获得外部的内容
复制链接

扫一扫

专栏目录