前端（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 ...
随机推荐
- tensorflow识别验证码（1）-tensorflow安装，验证码生成
什么是TensorFlow? TensorFlow是Google开发的一款神经网络的Python外部的结构包, 也是一个采用数据流图来进行数值计算的开源软件库.TensorFlow 让我们可以先绘制 ...
- ThinkPHP可以支持直接使用字符串作为查询条件
ThinkPHP可以支持直接使用字符串作为查询条件,但是大多数情况推荐使用数组或者对象来作为查询条件,因为会更加安全. 大理石平台哪家好 一.使用字符串作为查询条件 这是最传统的方式,但是安全性不高, ...
- 二分图匹配——poj1469
关于本题二分图的匹配关系始终是加单向边用左边去匹配右边,match表示的是右边的人匹配的对应的左边的点 /* 关于本题二分图的匹配 链接的关系始终是单向边 用左边去匹配右边,match表示的是右边的人 ...
- Android数据适配器Adapter简介
1.简介 Adapter是用来帮助填充数据的中间桥梁,简单点说就是:将各种数据以合适的形式显示到view上,在常见的View(List View,Grid View)等地方都需要用到Adapter! ...
- 2019牛客暑假多校赛（第二场） F和H（单调栈）
F-Partition problem https://ac.nowcoder.com/acm/contest/882/F 题意:输入一个数n,代表总共有2n个人,然后每个人对所有人有个贡献值,然后问 ...
- 07-img和a标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HBase Master-status
- windows API 第九篇 _tcslwr _strlwr _wcslwr _mbslwr
将字符串转化为小写Convert a string to lowercase. 函数原型: char *_strlwr( char *string ); //#include ...
- python urllib模块中的方法
1.urllib.urlopen(url[,data[,proxies]]) 打开一个url的方法,返回一个文件对象,然后可以进行类似文件对象的操作.本例试着打开google >>> ...
- csp-s模拟测试51(b)attack，tree题解
题面:https://www.cnblogs.com/Juve/articles/11598286.html attack: 支配树裸题? 看一下支配树是什么: 问题:我们有一个有向图(可以有环),定 ...