HTML_简单JQ的AJAX响应式交互

最新推荐文章于 2021-12-14 11:07:36 发布

原创最新推荐文章于 2021-12-14 11:07:36 发布 · 917 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

HTML/CSS 专栏收录该内容

18 篇文章

订阅专栏

本文介绍AJAX技术原理及其在jQuery中的应用实例。通过点击按钮触发AJAX请求，无需刷新页面即可更新指定区域内容。

AJAX技术是动态交互式技术，基于jq实现！

AJAX是不需要刷新页面就可以达到更新页面的方式，类似Windows下的局部刷新机制！

以往的HTMLget请求一个文件时，获取到了文件内容然后需要刷新才能显示页面，AJAX解决了这种笨拙的问题！

实现代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX</title>
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("#yy").click(function(){
		$.ajax({url:"demo_test.txt",success:function(result){
			$("#div1").html(result);
		}});
	});
});
</script>
</head>
<body>

<div id="div1"><h2>此处div用于显示服务器返回的信息</h2></div>
<button id="yy">提交请求，并将服务器返回数据显示到上文中</button>
</body>
</html>

代码分析：

<script>
$(document).ready(function(){
	$("#yy").click(function(){
		$.ajax({url:"demo_test.txt",success:function(result){
			$("#div1").html(result);
		}});
	});
});
</script>

这一段为核心代码

创建一个jq事件

$(document).ready(function()

下面是事件代码

$("#yy").click(function(){
        $.ajax({url:"demo_test.txt",success:function(result){
            $("#div1").html(result);
        }});
    });

绑定ID前面必须加上#

$("#yy")

增加单击事件

.click(function()

调用ajax请求url页面，并将返回数据放入到变量result中

result是结果的意思！

 $.ajax({url:"demo_test.txt",success:function(result){

也可以这样使用：

$("#yy").click(function(e){
        $.ajax({url:"demo_test.txt",success:function(e.result){
            $("#div1").html(e.result);
        }});
    });

即将e变量作为保存结果，其中属性result为返回结果！可以在函数体内多次使用！