异步访问

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异步访问和加载片段的更多相关文章

  1. ASP.NET MVC中使用ASP.NET AJAX异步访问WebService

    使用过ASP.NET AJAX的朋友都知道,怎么通过ASP.NET AJAX在客户端访问WebService,其实在ASP.NET MVC中使用ASP.NET AJAX异步访问WebService 也 ...

  2. JQuery $.ajax(); 异步访问完整参数

    $.ajax 完整参数   jquery中的ajax方法参数 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post ...

  3. flask+sqlite3+echarts3+ajax 异步数据加载

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

  4. IE8 环境的 JQuery 中的 $.ajax 拒绝访问---解决方案

    需求是兼容到 IE8. $.ajax 总是请求失败,直接跳转到 error 函数中,报错:拒绝访问. 网上的一些解决方法都试过了还是没有用,比如再请求之前设置 jQuery.support.cors ...

  5. Ajax异步后台加载Html绑定不上事件

    因项目需要,需要实时从后台动态加载html,开发过程中,遇到事件绑定不上,后来百度一番,大概意思:ajax是异步加载的,页面一开始绑定事件的时候,后台数据还没有传过来,就绑定事件,这个时候找不到这个d ...

  6. 触碰jQuery：AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  7. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  8. jquery的ajax异步请求接收返回json数据

    http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...

  9. 详谈 Jquery Ajax 异步处理Json数据.

    啥叫异步,啥叫Ajax.咱不谈啥XMLHTTPRequest.通俗讲异步就是前台页面javascript能调用后台方法.这样就达到了无刷新.所谓的Ajax.这里我们讲二种方法 方法一:(微软有自带Aj ...

随机推荐

  1. python库参考学习网址

    https://github.com/china-testing/python-api-tesing 这里有很多python库参考

  2. CF1166D——数学公式思维题

    #include<bits/stdc++.h> using namespace std; #define ll long long ll ans[],a,b,m; /* b=2^(n-2) ...

  3. SpringMVC学习总结

    SpringMVC部分重点组建介绍 前端处理器(DispatcherServlet):接受请求,响应结果,是SpringMVC的核心 处理映射器(HandlerMapping):根据URL去查找处理器 ...

  4. Java室内最短路径搜索(支持多楼层)

    修改了上次的代码,现在支持室内的多楼层情况下的最短路径搜索,还是使用A*算法,把在GraphAdjList中VNode没有利用起来的data字段作为我们存储楼层属性的位置. 实际上是我偷懒了,正常情况 ...

  5. C#绘制渐变背景

    //绘制渐变色背景 Graphics g = e.Graphics; LinearGradientBrush linearGradientBrush = new LinearGradientBrush ...

  6. NCDC 天气数据的预处理

    "Hadoop: The Definitive Guild" 这本书的例子都是使用NCDC 天气数据的,但由于书的出版和现在已经有一段时间了,NCDC现在提供的原始数据结构已经有了 ...

  7. [CQOI2009]叶子的染色【性质+树形Dp】

    Online Judge:Bzoj1304,Luogu P3155 Label:无根树,树形Dp 题目描述 给定一棵\(N\)个节点的无根树,它一共有\(K\)个叶子节点.你可以选择一个度数大于1的节 ...

  8. 关于Canvas的坐标系

    注意Canvas的坐标系应该是这样子的: 看下面的例子: 最后的显示效果是:

  9. tinyint(1)遇到的坑

    一. Mysql查询的boolean结果将输出为0或者1. 比如: select 1=1; 其输出结果为1. 二. 使用一套中间件对kafka消息进行解析为mysql 语句,其中遇到如下的问题, 目标 ...

  10. string主要操作函数

    参考博客:http://blog.csdn.net/zhenyusoso/article/details/7286456 std::string illegal(" \t\f\v\n\r\\ ...