异步访问

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. Leetcode92. Reverse Linked List II反转链表

    反转从位置 m 到 n 的链表.请使用一趟扫描完成反转. 说明: 1 ≤ m ≤ n ≤ 链表长度. 示例: 输入: 1->2->3->4->5->NULL, m = 2 ...

  2. axios请求头几种区别:application/x-www-form-urlencoded

    今天小伙伴问我们项目axios默认请求头是application/x-www-form-urlencoded;charset=UTF-8, 现在有个后端接口要求请求头方式为application/js ...

  3. arguments的介绍（一）

    arguments 是一个类数组对象.代表传给一个function的参数列表. 1.1 arguments length arguments 是个类数组对象,其包含一个 length 属性,可以用 a ...

  4. 笔试之const问题

    1 . ; int *j=(int *)&i; *j=; cout<<i<<*j<<endl; 答案i为0,*j为1. 2. char * const p= ...

  5. 笔试中sizeof求字节数的问题

    1. ]) { cout<<sizeof(ch)<<endl; //或者sizeof(ch)=?; } 这种情况,数组名作为形参,退化成指针,所以sizeof结果是4(32位编 ...

  6. Java-JPA：JPA

    ylbtech-Java-JPA:JPA JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对 ...

  7. VRRP概述-转

    本文介绍了VRRP的基本原理.特点和应用. VRRP概述 随着Internet的发展,人们对网络的可靠性的要求越来越高.对于局域网用户来说,能够时刻与外部网络保持联系是非常重要的. 通常情况下,内部网 ...

  8. stylus实现边框1px

    //1px的实现 border($border-width = 1px, $border-color = #ccc, $border-style = solid, $radius = ) // 为边框 ...

  9. java连接SQLserver数据库模板代码

    package cn.mldn.lxh.dbc; import java.sql.Connection; import java.sql.DriverManager; public class Dat ...

  10. SPOJ - UOFTCG 树的最小路径覆盖

    //SPOJ - UOFTCG 树的最小路径覆盖 #include <bits/stdc++.h> #include <vector> using namespace std; ...