异步访问

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. 小程序中template的用法

    demo案例: wxml代码: <view> <text>template使用demo</text> <!-- <view wx:for="{ ...

  2. 安装tomcat8.5

    1.去官网下载安装文件 网址:https://tomcat.apache.org/download-80.cgi 2.在安装目录的bin中运行startup.bat即可启动 3.启动好tomcat后, ...

  3. leetcode-买卖股票的最佳时机④*

    题目描述: 方法一: class Solution: def maxProfit(self, k: int, prices: List[int]) -> int: if len(prices) ...

  4. Data Dependency

    https://en.wikipedia.org/wiki/Data_dependency (There’s some misleading expression on the flow/data d ...

  5. Angular CLI ng常用指令整理

    一.组件创建 ng generate component heroes 二.运行项目 ng serve --open //--open 立即打开 三.创建指令 ng g directive my-ne ...

  6. 【转】浅析BFC及其作用

    1. 什么是BFC BFC(block formatting context):简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用. 中文译为块级格式化上下文.是 ...

  7. C#可扩展编程之MEF(四)：见证奇迹的时刻

      前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往 ...

  8. Activiti配置实例以及Spring集成配置

    public class TestDB { public static void main(String[] args) { //1. 创建Activiti配置对象的实例 ProcessEngineC ...

  9. Ubuntu安装CUDA9.2(不更新驱动)

    1.先装驱动,以为安装CUDA时安装最新驱动导致CUDA用不了 sudo apt-get install nvidia-396 2.参考这,安装好CUDA 9.2 https://developer. ...

  10. 微信小程序之组件的集合（五）

    这个是学习复杂的组件的封装的,在课程中,主要实现的是书单上方的搜索功能组件的开发,这个应该是较之前的组件是有一定难度的,但是现在学到现在,感觉前端的内容和后端的内容比较起来,还是比较容易的,而且好多内 ...