用jQuery的AJax实现异步访问、异步加载
本篇文章实现了用jQuery的AJax实现异步访问和异步加载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
【异步访问】
用一个例子用以说明：点击按钮，将input内用户输入的数据发送给服务端，并将结果返回给页面。
首先是html承载内容：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>AJax异步访问</title> <script src="js/jquery-2.1.3.min.js"></script> <script src="js/ajaxDemo.js"></script> </head> <body> <input type="text" id="nameValue"> <br/> <button id="btn">提交</button> <p> 结果：<span id="result"></span> </p> </body> </html>
配置服务器：Server.php
<?php
if(isset($_GET['name'])){
echo "姓名：".$_GET['name'];
}else{
echo "参数错误";
}
ajaxDemo.js实现AJax异步访问:
$(document).ready(function(){
$("#btn").on("click",function(){
//在与服务器通讯较慢时给用户提示信息
$("#result").text("数据请求中，请稍后...");
//向服务器发送请求(get、post)
$.get("Server.php",{name:$("#nameValue").val()},function(data){
$("#result").text(data);
}).error(function(){
//当服务器出现异常时
$("#result").text("服务器正在维护")
})
})
})
实现效果：
【异步加载】
主要用到load()方法以及getScript()方法,具体以一个例子说明：
在现有html文件中加载一个拟好的片段，以及在片段加载完成之前阻止用户进一步操作的弹出框。
首先是现有html代码，无任何内容:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>AJax异步加载</title> <script src="js/jquery-2.1.3.min.js"></script> <script src="js/main.js"></script> </head> <body> </body> </html>
拟一个js文件getData.js写一个函数最简陋的弹出框提示为例：
function getData(){
alert("片段的内容引自新浪体育");
}
拟一个片段box.htm，承载要加载的片段内容：
<div>
<h4>中超-耿晓峰失误拉蒙两球 申花7轮首败1-4绿城</h4>
<p>
北京时间8月11日晚19点35分，2015年中超联赛第22轮在杭州黄龙体育场开始一场较量，
由杭州绿城迎战上海申花。上半场第7分钟陈柏良突然冷射，导致耿晓峰接球脱手造成失球，
这是中华台北球员（陈昌源在比利时土生土长）在中超联赛进的首球。
第12分钟申花队吕征禁区右路左脚凌空射门扳平比分。第25分钟阿甘在底线附近把球送入禁区，
拉蒙头球得分，第37分钟阿甘单刀赴会打入一球。
第60分钟阿甘头球摆渡，拉蒙跟进射门梅开二度。最终杭州绿城4比1战胜上海申花。
</p>
</div>
最后写main.js来异步加载getData.js以及box.htm到现有html文件中。
$(document).ready(function(){
//异步加载js文件
$.getScript("js/getData.js").complete(function(){
getData();
})
//异步加载片段
$("body").text("加载中...")
$("body").load("box.htm",function(url,status,c){
if(status=="error"){
$(this).text("片段加载失败");
}
});
})
最后效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
ajax异步请求详解
做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.com学习,教程完善,适合初学者快速入门. jQuery的引用,可以通过下载js文件导入,或通过外部导入 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"
-
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
首先来看工程结构图: 项目所需要的包,如下所示: JSP代码: <%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServe
-
jQuery 中ajax异步调用的四种方式
<script type="text/javascript" language="javascript" src="JS/jquery-1[1].2.3.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ //Jquery
-
jQuery Ajax传值到Servlet出现乱码问题的解决方法
最近在学jquery ui,在做一个小功能的时候需要将前台的值获取到,通过Ajax传递给Servlet,然后再在返回数据结果,但是在Servlet接受参数的时候,通过后台打印,发现接受乱码,代码示例如下: public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/ht
-
jquery请求servlet实现ajax异步请求的示例
ajax可以发送异步请求实现无刷新效果,但是使用javascript比较麻烦,就query提供了一些封装的方法 ,可以使得操作更为简单: $.ajax()方法: function sendRequest() { $.ajax({ url: "Hello", type: "GET", dataType: "txt", data: "name=zhangsan", complete: function(result){ alert
-
利用jQuery的deferred对象实现异步按顺序加载JS文件
前段时间看了阮一峰的jQuery的deferred对象详解一文,对jQuery中的deferred的用法了一些了解,今天看到园子里的一篇文章:关于重构JS前端框架的失败经验(顺便怀念那些死去的代码),于是把我之前写的一个利用jQuery的deferred异步按顺序加载JS文件方案分享出来,欢迎指正. 如果你现在对jQuery中的deferred还不了解,强烈建议你看一下阮一峰的jQuery的deferred对象详解一文. 加载JS文件的代码如下: 复制代码 代码如下: /* Loading Ja
-
vue3.0+vite2实现动态异步组件懒加载
创建一个vite项目 性能决定成败;vite确实快: cmd 命令行(默认你已经安装了node & npm),执行npm init @vitejs/app vue-study – --template vue: cd至vue-study,npm install(安装依赖); npm run dev(启动项目): 创建组件 新建一个目录为pages,pages下面再新建一个目录contents,contens下面可以新建具体的组件目录页面,此时目录结构为 App.vue <template&g
-
jquery 实现滚动条下拉时无限加载的简单实例
思路: 通过捕捉浏览器滚动条下拉事件,触发异步加载数据的js方法,实现数据的动态添加. 脚本: var lastId=0;//记录每一次加载时的最后一条记录id,跟您的排序方式有关. var isloading = false; $(window).bind("scroll", function () { if ($(document).scrollTop() + $(window).height() > $(document).height() - 10 &&
-
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
本文实例讲述了PHP+jQuery实现滚屏无刷新动态加载数据功能.分享给大家供大家参考,具体如下: index.php <?php require_once('connect.php'); //连接数据库 $user = array('demo1','demo2','demo3','demo3','<de></de>mo4'); //模拟了几个用户 ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans
-
php+jquery+html实现点击不刷新加载更多的实例代码
基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"更多"链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录并以JSON的形式返回给前台页面,前台页面jQuery解析JSON数据,并将数据追加到列表页.其实就是Ajax分页效果. HTML 首先要引入jquery库和jquery.more.js插件,jquery.more.js已经将许多功能都封装好了,并提供了参
-
jQuery实现滚动到底部时自动加载更多的方法示例
本文实例讲述了jQuery实现滚动到底部时自动加载更多的方法.分享给大家供大家参考,具体如下: 这里利用AJAX,实现滚动到底加载数据功能: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/
-
原生ajax写的上拉加载实例
上拉加载的思路 1 上拉加载是要把屏幕拉到最底部的时候触发ajax事件请求数据 2.所有要获取屏幕的高度 文档的高度 和滚动的高度 下面的代码是已经做好了兼容的可以直接拿来用 Javascript: alert(document.body.clientWidth); //网页可见区域宽(body) alert(document.body.clientHeight); //网页可见区域高(body) alert(document.body.offsetWidth); //网页可见区域宽(body)
-
jQuery实现模仿微博下拉滚动条加载数据效果
本文实例讲述了jQuery实现模仿微博下拉滚动条加载数据效果.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>滚动条距离底部</title> <script src="jquery-1.6.2.min.js" type="text/javascript&
-
jQuery实现彩带延伸效果的网页加载条loading动画
本文实例讲述了jQuery实现彩带延伸效果的网页加载条loading动画.分享给大家供大家参考,具体如下: 这里介绍的jQuery彩带效果网页加载条动画,我觉得挺有创意的,虽然难度不算大,但能想到用这样一个背景来做Loading加载条,也实属不易,不服气的,你为什么就没有想到这样做呢?本网页加载条效果使用了jQuery插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-n-color-cha-web-loading-demo/
-
Jquery的基本对象转换和文档加载用法实例
本文实例讲述了Jquery的基本对象转换和文档加载用法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <