用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 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
Chosen 基于jquery的选择框插件使用方法
May 30 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
新手简单了解vue
May 29 Javascript
8 个有用的JS技巧(推荐)
Jul 03 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 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 多线程上下文中安全写文件实现代码
2009/12/28 PHP
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
pandas中Timestamp类用法详解
2017/12/11 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
Django框架视图介绍与使用详解
2019/07/18 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
python 解决函数返回return的问题
2020/12/05 Python
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
委托证明的格式
2014/01/10 职场文书
幼儿园托班开学寄语
2014/01/18 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
教师三严三实心得体会
2014/10/11 职场文书
公司股份合作协议书
2014/12/07 职场文书
长城导游词300字
2015/01/30 职场文书