前端（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 ...
随机推荐
- vagrant生成多台虚拟机
第一种: # -*- mode: ruby -*- # vi: set ft=ruby : # All Vagrant configuration is done below. The "2 ...
- R语言进行广州租房可视化
又到了一年一度的换租房的季节,在广州,想要找到一处好一点的租房真心不容易,不是采光不好,就是价格太贵,怎么才能找到合适自己的房子呢?于是我利用“造数”这个虫工具爬取了安居客网的广州租房的数据,通过分析 ...
- 廖雪峰Java15JDBC编程-3JDBC接口-2JDBC查询
我们可以使用JDBC查询来执行select语句. 1. Statement try(Connection conn = DriverManager.getConnection(JDBC_URL, JD ...
- thinkphp 数据写入
直线电机优势 ThinkPHP的数据写入操作使用add方法,使用示例如下: $User = M("User"); // 实例化User对象 $data['name'] = 'Thi ...
- session过期跳转到登陆页面并跳出iframe框架的两个方法
最近在做拦截器,判断用户登录后操作超时,失去权限然后要重新登录,但是用的iframe,返回的登陆页总是在框架中显示,我百度了下,总是只有其中一个方法,现在分享下两种解决方法,希望对你们有帮助: 方法一 ...
- springmvc jar包下载
(1) springmvc jar包下载 提供地址 - qq_31307253的博客 - CSDN博客https://blog.csdn.net/qq_31307253/article/details ...
- JDK源码阅读--ArrayList
public class ArrayList<E> extends AbstractList<E> implements List<E>, RandomAccess ...
- 《DSP using MATLAB》Problem 8.15
代码: %% ------------------------------------------------------------------------ %% Output Info about ...
- 04_springmvc注解开发
一.注解开发 需求:1.进入商品查询列表页面. 2.点击修改,进入商品修改页面,页面中显示了要修改的商品(从数据库查询),要修改的商品从数据库查询,根据商品id(主键)查询商品信息. 3.在商品修改页 ...
- 编写函数处理user_list，新方法
写函数,完成以下功能: # 例如有: user_list=[ {"name": "alex","hobby":"抽烟"} ...