异步访问
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="100px; height:100px; background-color: #ff0000"></div>
helloJS.js
function sayHello(){ alert("hello ajax"); }