前端（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 ...
随机推荐
- 使用github作为远程仓库的常见git操作
[git上传本地代码到github新建仓库]一.建立git本地仓库 1.在本地目标文件夹(Code)中执行命令: git init //初始化本地仓库二.将上传到github的项目文件添加到本地仓库中 ...
- tensorflow识别验证码（1）-tensorflow安装，验证码生成
什么是TensorFlow? TensorFlow是Google开发的一款神经网络的Python外部的结构包, 也是一个采用数据流图来进行数值计算的开源软件库.TensorFlow 让我们可以先绘制 ...
- DOM节点的创建、插入、删除
值得注意的是:节点的创建.插入以及删除都是操作父级容器.(1)创建var newDiv = documnet.createElement('div'); ——创建的元素只能操作一次 (2)插入/追加a ...
- 筛法求欧拉函数（poj2478
求1-n的欧拉函数的值 #include <iostream> #include <cstdio> #include <queue> #include <al ...
- Xstream 解析xml文件内容
刚刚接手的一个项目,接到一个对接用户数据的需求,对方使用的是xml格式来传输文件,特此记下解析该类文件的方法 public interface XmlResolver<T> { XStre ...
- Windows相关命令
1.查看端口8080被哪个进程占用 netstat -ano | findstr "8080" 2.查看进程号为5768对应的进程 tasklist | findstr " ...
- C++内存字节对齐规则
为什么要进行内存对齐以及对齐规则 C/C++—— 内存字节对齐规则 C++内存字节对齐规则
- springboot与分布式（zookeeper+dubbo）
docker安装zookeeper命令: docker pull zookeeper:3.4.14 docker启动zookeeper命令: docker run --name zk01 -p 218 ...
- centos6 nginx 配置本地https访问
安装准备 yum install openssl openssl-devel 生成文件 cd /usr/local/nginx/conf # 生成密钥privkey.pem: openssl genr ...
- 使用Java代码获取Java进程ID的方法
需要jre/lib下的tools.jar包 public class Test { public static void main(String[] args) throws Exception { ...