用jQuery的AJax实现异步访问、异步加载


Posted in Javascript onNovember 02, 2016

本篇文章实现了用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("服务器正在维护") 
    }) 
  }) 
})

实现效果:

用jQuery的AJax实现异步访问、异步加载

【异步加载】

主要用到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("片段加载失败"); 
    } 
  }); 
 
})

最后效果:

用jQuery的AJax实现异步访问、异步加载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript模仿msgbox提示效果代码
Jun 10 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
js闭包学习心得总结
Apr 17 Javascript
微信小程序日历效果
Dec 29 Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
原生JS实现留言板功能
Feb 08 Javascript
Vue实现PC端靠边悬浮球的代码
May 09 Javascript
小程序实现密码输入框
Nov 16 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 #Javascript
bootstrap table复杂操作代码
Nov 01 #Javascript
bootstrap flask登录页面编写实例
Nov 01 #Javascript
JS弹出窗口的运用与技巧大全
Nov 01 #Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 #Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 #Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 #Javascript
You might like
php生成图形验证码几种方法小结
2013/08/15 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
jquery动态添加option示例
2013/12/30 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
Python简单计算文件夹大小的方法
2015/07/14 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
详解python多线程之间的同步(一)
2019/04/03 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
寒假思想汇报
2014/01/10 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python
mybatis 获取更新记录的id
2022/05/20 Java/Android