HTML_简单JQ的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为返回结果！可以在函数体内多次使用！

 $("#div1").html(result);

这条代码的意思是在dom树中寻找div1属性，并将其值修改为结果，注意此方法只能用于请求一些文件，但是并不能实现POST提交方式

因为这里没有使用XMLHttpRequest 对象，后面我将教大家如何使用XMLHttpRequest 对象来做ajax通讯！

HTML_简单JQ的AJAX响应式交互相关推荐

如何用一简单的CSS制作响应式HTML网页
如何用简单的CSS制作响应式HTML网页 #故事前端开发在这篇文章中,我将教你如何使用CSS网格来创建一个超级酷的图像网格,它随着屏幕的宽度而改变列的数量. 最赞的一点就是:这个响应式效果只需要添加 ...
响应式html轮播图,最简单的响应式jQuery轮播图插件
easySlider.js是一款轻量级.简单易用的响应式jQuery轮播图插件.easySlider.js可以根据视口的大小来动态修改轮播图的尺寸.它压缩后的版本仅5K大小,简单实用. 使用方法在页 ...
阿里淘宝一直在推的响应式编程到底是个什么鬼？
随着这些年智能手机的发展和普及,我们的服务器端要应对日益增长的巨大流量. 从开发的角度来看,这就要求我们必须设计出高扩展性和高可用性的程序,以确保能够适应日益增长的请求所带来的压力. 而从使用者的角度 ...
14个支持响应式设计的流行前端开发框架
在几年前,并没有真正意义上的前端开发.随着网络技术的发展,网站和 Web 应用程序变得越来越复杂,前端部分的工作独立出来逐渐成为现在的前端开发.如今,我们可以看到越来越多的公司在招聘前端开发岗位. 前 ...
14个支持响应式设计的前端框架
在几年前,并没有真正意义上的前端开发.随着网络技术的发展,网站和 Web 应用程序变得越来越复杂,前端部分的工作独立出来逐渐成为现在的前端开发.如今,我们可以看到越来越多的公司在招聘前端开发岗位. 前 ...
如何实现页面的响应式布局？
所谓响应式布局,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.他的好处我们不用写多套屏幕模板而只需要写一个就可以实现,现在用的比较多的就是bootstrap的响应式布局,而他实现的 ...
CSS3 响应式布局实例
掌握了响应式设计的核心技术之后,你可以迫不及待想要使用它来构建响应式网站了.也许你会认为响应式设计有点复杂,但事实上,它比你想象的要简单. 下面通过构建一个响应式的页面基本布局,让你快速了解如何使用响 ...
来看看优酷是如何测试 App 响应式布局的！
作者 | 阿里巴巴文娱技术刘丽琴头图 | CSDN 下载自东方IC 响应式布局是在屏幕尺寸发生变化时,APP的页面.组件按照规则进行动态自适应,实现一套代码兼容多尺寸终端设备.响应式技术应用在多 ...
html发展时间轴纵向插件,jquery响应式垂直时间轴插件vertical-timeline
插件描述:jquery-vertical-timeline是一款简单实用的jQuery响应式垂直时间轴插件. jquery-vertical-timeline 是一款简单实用的jQuery响应式垂直时 ...

HTML_简单JQ的AJAX响应式交互

HTML_简单JQ的AJAX响应式交互相关推荐

最新文章

热门文章