用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 相关文章推荐
基于jquery的动态创建表格的插件
Apr 05 Javascript
浅析js封装和作用域
Jul 09 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 Javascript
微信小程序 自定义消息提示框
Aug 06 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
JavaScript 去重和重复次数统计
Mar 31 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
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 use和include区别总结
2019/10/13 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
在Python中使用异步Socket编程性能测试
2014/06/25 Python
python实现在控制台输入密码不显示的方法
2015/07/02 Python
Python实现KNN邻近算法
2021/01/28 Python
python tkinter界面居中显示的方法
2018/10/11 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
python conda操作方法
2019/09/11 Python
python关于调用函数外的变量实例
2019/12/26 Python
python numpy数组中的复制知识解析
2020/02/03 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
安全月活动总结
2014/05/05 职场文书
工作收入证明模板
2014/10/10 职场文书
2015公司年度工作总结
2015/05/14 职场文书
React中的Context应用场景分析
2021/06/11 Javascript
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
Java后台生成图片的完整步骤
2021/08/04 Java/Android
从原生JavaScript到React深入理解
2022/07/23 Javascript