前端（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 ...
随机推荐
- gdb调试工具的使用
GDB是一个由GNU开源组织发布的.UNIX/LINUX操作系统下的.基于命令行的.功能强大的程序调试工具. GDB中的命令固然很多,但我们只需掌握其中十个左右的命令,就大致可以完成日常的基本的程序调 ...
- Android开发 MediaRecorder使用Camera2配合录制视频(暂时有异常抛出,无法使用)
前言 这个博客本来是用来详细介绍MediaRecorder与Camera2,但是出乎预料之外,在获取mMediaRecorder.getSurface();的时候无论如何都是报错的,报错为Surfac ...
- CF891D Sloth
题意:给你一棵树,你选择删掉一条边,再加上一条边(也要保证为树),问最后树上的节点能够两两完美匹配的加删边方案数? n<=5e5. 标程: #include<cstdio> #inc ...
- Python3.6爬虫+Djiago2.0+Mysql --数据爬取
1.下载对应版本的python mysql 模块 我的是:pymssql-2.2.0.dev0-cp36-cp36m-win_amd64.whl 2.手动创建table create table gr ...
- 杂项-VOD：VOD（视频点播）
ylbtech-杂项-VOD:VOD(视频点播) 视频点播是二十世纪90年代在国外发展起来的,英文称为“Video on Demand”,所以也称为“VOD”.顾名思义,就是根据观众的要求播放节目的视 ...
- SpringBoot 02_返回json数据
在SpringBoot 01_HelloWorld的基础上来返回json的数据,现在前后端分离的情况下多数都是通过Json来进行交互,下面就来利用SpringBoot返回Json格式的数据. 1:新建 ...
- Python使用微信接入图灵机器人
1.wxpy库介绍 wxpy 在 itchat 的基础上,通过大量接口优化提升了模块的易用性,并进行丰富的功能扩展. 文档地址:https://wxpy.readthedocs.io 从 PYPI 官 ...
- Python学习day07 - Python进阶(1) 内置方法
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- cdh_hadoop下载地址
http://archive.cloudera.com/cdh5/cdh/5/
- iOS汇编系列-汇编入门
概述 汇编语言(Assembly Language)用符号代替了0和1,比机器语言更便于阅读和记忆. 但是同样汇编语言同样指令太多不便于记忆,就出现了高级语言.C\C++\Java\Swift等,更接 ...