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. 通过shell脚本排查jar包中类冲突

    当我们在线上运行项目时,依赖很多jar包,有时候某个类的全限定名,在多个包中出现,而某个包中的类的方法没有,而且在类加载时,刚好加载了这个类,可能会报找不到方法,或者找不到类的异常,这种情况就可能是类 ...

  2. JavaScript 模式》读书笔记（3）— 字面量和构造函数2

    上一篇啊,我们聊了聊字面量对象和自定义构造函数.这一篇,我们继续,来聊聊new和数组字面量. 三.强制使用new的模式 要知道,构造函数,只是一个普通的函数,只不过它却是以new的方式调用.如果在调用 ...

  3. Swift：字符串(String)分割之Substring优雅转换

    认识Substring类型 这是一个全新的类型,看类名像是String的子类,但是大家千万别被误导了,Substring并不是String的子类,这是两个不同的类型,但是它们都继承了StringPro ...

  4. 【原创】基于RBI的性能测试理念，通过jmeter快速定位接口最大并发用户数

    测试工具:jmeter v_5.2 测试对象:某网站的物料获取接口,需登录后操作 测试目的:快速定位该接口最大并发用户数 思路&步骤: 1.模拟一个场景,某天临近下班,主管突然过来让你测下你们 ...

  5. JSP+Servlet+C3P0+Mysql实现的网上蛋糕店

    本文存在视频版本,请知悉 项目简介 项目来源于:https://gitee.com/PositiveMumu/CakesShop/tree/master 这次分享一个蛋糕商场系统,还是很简单的系统.界 ...

  6. 【docker Elasticsearch】Rest风格的分布式开源搜索和分析引擎Elasticsearch初体验

    概述: Elasticsearch 是一个分布式.可扩展.实时的搜索与数据分析引擎. 它能从项目一开始就赋予你的数据以搜索.分析和探索的能力,这是通常没有预料到的. 它存在还因为原始数据如果只是躺在磁 ...

  7. python浅学【网络服务中间件】之MongoDB

    一.关于MongoDB: MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性能. MongoDB 旨在为WEB应用提供 ...

  8. hdu1072 逃离迷宫系列 bfs

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/1072/ 题意:逃离迷宫,路中可能有炸弹,总时间是6个单位,在有炸弹的位置,如果到达的时刻时间大于0,则恢复到6时 ...

  9. Unity 游戏框架：命名的力量--变量

    变量的命名入门 大家先来试着理解一下这段代码: var todoList = new TodoList(); todoList.Todos = new List<Todo>(); var ...

  10. 嘉泽 P2120: 【基础】半质数 题解

    原题链接 简要题意: 求区间内能分解为两个质数乘积的数. 欧拉筛先筛素数. 然后再筛答案. 时间复杂度: \(O(n)\). 实际得分:\(100pts\). #pragma GCC optimize ...