前端（jQuery）（5）-- jQuery AJAX异步访问和加载片段
异步访问
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<!--<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>-->
<script>
/*AJAX请求非常方便，底层已经封装好了*/
/*实现只修改页面一部分内容而不使页面刷新*/
$(document).ready(function(){
$("#btn").click(function(){
$("#result").text("请求数据中，请稍后");/*提升用户体验*/
$.get("Server2.php",{name:$("#namevalue").val()},function(data){
alert("hello");
$("#result").text(data);
/*这里是get方式，如果想改成post方式直接把js文件中的get和php文件中的get改成post就行了*/
}).fail(function(){
$("#result").text("通讯有问题");
/*视频教程里面用的是.error函数，但是视频是12年的太老了，所以可能会有错误，这里要用fail函数，
* 看来视频也还是要跟着时代走的啊！！！*/
});
});
}).ajaxError(function(event, jqxhr, settings, exception) {
console.log(event);
console.log(jqxhr);
alert(settings.url);/*setting可以获得到底是哪一个请求出错了。*/
// if ( settings.url == "http://localhost:9090/Server1.php" ) {
// $( "#result" ).text( "Triggered ajaxError handler." );
// }
});
</script>
</head>
<body>
<input type="text" id="namevalue">
<br/>
<button id="btn">send</button>
结果：<span id="result"></span>
</body>
</html>
Server.php
<?php
/**
* Created by PhpStorm.
* User: lin
* Date: 2018/12/14
* Time: 14:39
*/
if(isset($_GET['name'])){
echo "hello:".$_GET['name'];
}else{
echo "Args Error(参数错误)";
}
加载片段：
加载片段.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("body").text("wait....");
// alert("hello");
$("body").load("box.htm",function(a,status,c){/*加载一个盒子*/
console.log(status);
if(status == "error"){
$("body").text("片段加载失败！");
}
})
$.getScript("helloJS.js",function(){
sayHello();/*这样是可以的，可能是教学视频有点老了，有很多不对应的地方，他居然用了complete方法，
我在官方文档中就没有查到这个方法。*/
/*getScript方法使用.fail()方法处理错误。并不是error方法*/
});
});
/*.ajaxComplete(function( event, xhr, settings ) {
alert(settings.url);
if ( settings.url === "helloJS.js" ) {
/!*这里的setting无法获得helloJS.js的信息，但是能获得box.htm的信息*!/
sayHello();
/!*异步加载的方式就是为了更好的用户体验。
这里可以实现当加载完js文件的时候弹出一个对话框*!/
}
});*/
</script> </head>
<body> </body>
</html>
box.htm
<div style="width:100px; height:100px; background-color: #ff0000"></div>
helloJS.js
function sayHello(){
alert("hello ajax");
}
前端（jQuery）（5）-- jQuery AJAX异步访问和加载片段的更多相关文章
- ASP.NET MVC中使用ASP.NET AJAX异步访问WebService
使用过ASP.NET AJAX的朋友都知道,怎么通过ASP.NET AJAX在客户端访问WebService,其实在ASP.NET MVC中使用ASP.NET AJAX异步访问WebService 也 ...
- JQuery $.ajax(); 异步访问完整参数
$.ajax 完整参数 jquery中的ajax方法参数 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post ...
- flask+sqlite3+echarts3+ajax 异步数据加载
结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...
- IE8 环境的 JQuery 中的 $.ajax 拒绝访问---解决方案
需求是兼容到 IE8. $.ajax 总是请求失败,直接跳转到 error 函数中,报错:拒绝访问. 网上的一些解决方法都试过了还是没有用,比如再请求之前设置 jQuery.support.cors ...
- Ajax异步后台加载Html绑定不上事件
因项目需要,需要实时从后台动态加载html,开发过程中,遇到事件绑定不上,后来百度一番,大概意思:ajax是异步加载的,页面一开始绑定事件的时候,后台数据还没有传过来,就绑定事件,这个时候找不到这个d ...
- 触碰jQuery：AJAX异步详解
触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
- jQuery调用AJAX异步详解[转]
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- jquery的ajax异步请求接收返回json数据
http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...
- 详谈 Jquery Ajax 异步处理Json数据.
啥叫异步,啥叫Ajax.咱不谈啥XMLHTTPRequest.通俗讲异步就是前台页面javascript能调用后台方法.这样就达到了无刷新.所谓的Ajax.这里我们讲二种方法 方法一:(微软有自带Aj ...
随机推荐
- Crontab- Linux必学的60个命令
1.作用 使用crontab命令可以修改crontab配置文件,然后该配置由cron公用程序在适当的时间执行,该命令使用权限是所有用户. 2.格式 crontab [ -u user ] 文件 cro ...
- 【笔记篇】C#笔记1
返回目录:目录请戳这里~ 以后的C#笔记如果不出意外的话都是Win10 Professional + VS2015 Professional出的,(当然还有直接在编译框敲的所以能不能过编译我也不知道┑ ...
- C++ 系列：static
C++的static有两种用法:面向过程程序设计中的static和面向对象程序设计中的static.前者应用于普通变量和函数,不涉及类:后者主要说明static在类中的作用.一.面向过程设计中的sta ...
- Android 开发 MediaRecorder音频录制
前言 MediaRecorder类是Android sdk提供的一个专门用于音视频录制,一般利用手机麦克风采集音频和摄像头采集图像.这个类是属于简单的音频录制类,录制音频简单容易但是对音频流的控制也比 ...
- docker 个人遇到问题日志记录
system: openSUSE Leap 42.3 在openSUSE中可直接运行" sudo zypper in docker"进行安装docker-ce wakasann@l ...
- Python 变量与数据类型
1.变量命名规则: 变量名只能是字母,数字和下划线的任意组合 变量名第一个字符不能是数字 变量名区分大小写,大小写字母被认为是两个不同的字符 特殊关键字不能命名为变量名 2.数值的运算 print ( ...
- CSS3如何实现圆圈转圈，附demo
如图,如何实现圆圈转圈? 主要还是CSS3动画(只兼容了谷歌,需要兼容其它浏览器,加前缀即可) .move1 { animation: myMove1 5s ease-in infinite alte ...
- VS2010-MFC（对话框：为对话框添加控件）
转自:http://www.jizhuomi.com/software/151.html 上一讲创建了一个名为“Addition”的工程,目的是生成一个实现加法运算的应用程序.实现加法计算有几个必要的 ...
- R语言数据预处理
R语言数据预处理 一.日期时间.字符串的处理 日期 Date: 日期类,年与日 POSIXct: 日期时间类,精确到秒,用数字表示 POSIXlt: 日期时间类,精确到秒,用列表表示 Sys.date ...
- PAT甲级——A1101 Quick Sort
There is a classical process named partition in the famous quick sort algorithm. In this process we ...