前端（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");
}

转载于:https://www.cnblogs.com/foreverlin/p/10120304.html

前端（jQuery）（5）-- jQuery AJAX异步访问和加载片段相关推荐

SpringMVC→简介、MVC、SpringMVC工作原理、Maven搭建第一个SpringMVC、请求参数接收、重定向、文件上传、AJAX异步访问、请求参数接收绑定JSON、@注解及传参
MVC SpringMVC工作原理 Maven搭建第一个SpringMVC 目录结构 web.xml *-servlet.xml Controller请求处理类跳转页面 Maven运行服务器项目浏 ...
HTML5前端入门教程：Ajax 异步请求技术
AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). ✦ajax不是新的编程语言,而是一种使用现有标准的新方法.ajax是与服务 ...
flask+sqlite3+echarts3+ajax 异步数据加载
结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...
ajax异步同步加载PHP代码,jquery中的ajax同步和异步详解
jquery ajax同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面出现了假死状态,当这个ajax执行完毕后才会继续运行其他的代码假死状态解除.而异步的意思是这个aj ...
js结合jquery实现的ajax瀑布流加载实例
一.js代码 ajax函数 //瀑布流数据 var getData = function (i,url,name){$.post(url,{p:i},function(data){if(data.st ...
jq异步实现ajax,用jQuery的AJax实现异步访问、异步加载
本篇文章实现了用jQuery的AJax实现异步访问和异步加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下. [异步访问] 用一个例子用以说明:点击按钮,将input内用户输入的数据发送给服务端, ...
jquery封装的ajax请求
属性名称解释 url 请求的服务器端url地址 async (默认: true) 默认设置下,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为 false data 发送到服务器的数据, ...
Ajax异步交互与跨域访问（三）JQuery中的Ajax
jQuery中的Ajax 一.jQuery提供的六个Ajax操作方法 1.load()方法 $element.load(url,[data],[callback]) 参数: url:异步请求的HTML ...
jquery ajax异步调用
写程序的第一步都要知其然,至于知其所以然就要看个人的爱好了.下面说一下web开发中经常用的ajax. 这里是用的jquery框架实现的ajax异步调用.废话少说先上代码.(asp.net开发) var ...

前端（jQuery）（5）-- jQuery AJAX异步访问和加载片段

异步访问

前端（jQuery）（5）-- jQuery AJAX异步访问和加载片段相关推荐

最新文章

热门文章