1.在项目的根目录下创建data目录，data目录下创建info文件,编写info文件如下代码:

<h1>all data<h2>

<p>this is the data of the p sign</p>

2.在index.html文件中编写如何代码:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta lang="zh">

    <script src="js/jquery-3.3.1.js">

    </script>

    <script>

        $(document).ready(function(){

            $("#btn1").click(function(){

                $('#test').load('data/info',function (responseTxt,statusTxt,xhr) {

                    if(statusTxt == "success")

                        alert("内容加载成功！");

                    if(statusTxt == "error")

                        alert("Error: "+xhr.status+": "+xhr.statusText);

                });

            });

            $("#btn2").click(function () {

                $("#test").load('data/info p',function (responseTxt,statusTxt,xhr) {

                    if(statusTxt == "success")

                        alert("内容加载成功！");

                    if(statusTxt == "error")

                        alert("Error: "+xhr.status+": "+xhr.statusText);

                })

            });

        })

    </script>

</head>

<body>

<h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>

<button id="btn1" type="button">获取全部内容</button>

<button id="btn2" type="button">获取p标签内容</button>

</body>

</html>

javascript入门 之 Ajax（一）的更多相关文章

  1. JavaScript入门之AJAX：原生ajax

    背景 传统的Web应用允许用户端填写表单(form),当提交表单时就向网页服务器发送一个请求.服务器接收并处理传来的表单,然后送回一个新的网页,但这个做法浪费了许多带宽,因为在前后两个页面中的大部分H ...

  2. JavaScript入门篇 编程练习

    编程挑战 一.定义"改变颜色"的函数 提示: obj.style.color obj.style.backgroundColor 二.定义"改变宽高"的函数 提 ...

  3. 慕课网JavaScript入门篇课程笔记

    1.js注释很重要 单行注释,在注释内容前加符号 “//”. <script type="text/javascript"> document.write(" ...

  4. JavaScript入门基础

    JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...

  5. JavaScript入门篇

    记录一下在慕课网学习JavaScript的过程. 以下内容均来自慕课网. 传送:https://www.imooc.com/code/401 为什么学习JavaScript 1. 所有主流浏览器都支持 ...

  6. JavaScript入门--慕课网学习笔记

     JAVASCRIPT—(慕课网)入门篇 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script&g ...

  7. JavaScript入门几个概念

    JavaScript入门几个概念 刚刚入门JavaScript的时候,搞懂DOM.BOM以及它们的对象document和window很有必要. DOM是为了操作文档出现的API,document是它的 ...

  8. javascript入门笔记3-dom

    1.通过ID获取元素 document.getElementById("id") <!DOCTYPE HTML> <html> <head> & ...

  9. JavaScript入门(三)

    JavaScript入门篇—JSONP的应用 什么是JSONP 个人理解:将服务器端返回的json数据封装成JavaScript对象,非正式传输协议. JSONP解决了什么问题 Ajax不支持跨域请求 ...

随机推荐

  1. MAC下安装Fiddler抓包工具

    需求 我们都知道在Mac电脑下面有一个非常好的抓包工具:Charles.但是这个只能抓代理的数据包.但是有时候想要调试本地网卡的数据库 Charles 就没办法了.就想到了在windows下面的一个F ...

  2. LeetCode-使数组唯一的最小增量

    题目描述: 给定整数数组 A,每次 move 操作将会选择任意 A[i],并将其递增 1. 返回使 A 中的每个值都是唯一的最少操作次数. 示例: 输入:[1,2,2] 输出:1 解释:经过一次 mo ...

  3. 「newbee-mall新蜂商城开源啦」GitHub 上最热门的 Spring Boot 项目，我也要做一次靓仔！

    没有一个冬天不可逾越,也没有一个春天不会到来. 介绍一下新蜂商城的近况,同时,新蜂商城 Vue 版本目前也在开发中,在这篇文章里我也向大家公布一下新蜂商城 Vue 版本的开发进度,和大家同步一下,在不 ...

  4. 从发布订阅模式入手读懂Node.js的EventEmitter源码

    前面一篇文章setTimeout和setImmediate到底谁先执行,本文让你彻底理解Event Loop详细讲解了浏览器和Node.js的异步API及其底层原理Event Loop.本文会讲一下不 ...

  5. bash中的if条件语句报错[: missing `]'

    这是我的一个小demo #!/bin/bash read -p "请输入3个数:" n1 n2 n3 if [ $n1 -gt $n2 ] && [ $n1 -gt ...

  6. 说两个我在工作中有价值的bug

    看了虫师在公众号上写的一边文章,叫做<面试官问,说一个你在工作非常有价值的bug>.看完虫师举的列子后,我也开始想之前测试的bug,想到之后,觉得有必要记录一下. First,在测试新闻动 ...

  7. masql数据库的表查询

    昨日回顾 表与表之间建关系 一对多 换位思考 图书与出版社 先站在左表: 考虑左表的多条数据能否对应右表的一条数据 翻译:多本书能否被一个出版社出版 可以! 注意:单站在一张得出的表关系并不能明确两张 ...

  8. 洛谷3834 hdu2665主席树模板，动态查询区间第k小

    题目链接:https://www.luogu.com.cn/problem/P3834 对于区间查询第k小的问题,在区间数量达到5e5的时候是难以用朴素数据结构实现的,这时候主席树就应运而生了,主席树 ...

  9. 搭建Hadoop集群需要注意的问题：

    搭建Hadoop集群需要注意的问题: 1.检查三台主机名是否正确 2.检查三台IP是否正确 3.检查 /etc/hosts 映射是否正确 4.检查 JDK和Hadoop 是否安装成功(看环境变量配置) ...

  10. NASNet : Google Brain经典作，改造搜索空间，性能全面超越人工网络，继续领跑NAS领域 | CVPR 2018

    论文将搜索空间从整体网络转化为卷积单元(cell),再按照设定堆叠成新的网络家族NASNet.不仅降低了搜索的复杂度,从原来的28天缩小到4天,而且搜索出来的结构具有扩展性,在小模型和大模型场景下都能 ...