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. 记录一个引用文件所有js文件的方法

    在项目api声明的时候,避免每次添加新的js都要对应去处理 首先我在项目api文件下新建一个files的文件夹,然后再api文件夹下的index.js这样写: var api = {}; const  ...

  2. 爬虫前奏——代理ip的使用

    如果同一个IP短时见内多次访问统一网页,可能会被系统识别出是爬虫,因此使用代理IP可以很大程度上解决这一问题 常用的代理有: 西刺免费代理:www.xicidaili.com 快代理:www.kuai ...

  3. webpack学习(一)：webpack的安装和命令行

    本教程可以学习到如下内容: 1.webpack的安装 2.利用webpack命令打包js文件 3.如何在js文件里面引用css并将css文件在页面里面生效 4.学习webpack相关的高级的一些参数, ...

  4. Redis基本数据类型、数据持久化、过期策略及淘汰机制

    一点技术.技术乐享!!! 如果有人问你:Redis这么快,他的“多线程模式”你了解吗? 请回答他:您是想问Redis这么快,为什么还是单线程模式吗? redis是什么 简单来说redis是C语言开发的 ...

  5. linux入门系列18--Web服务之Apache服务2

    接上一篇文章,在了解Apache基本配置以及SELinux相关知识后,继续演示Apache提供的虚拟主机功能以及访问控制方式. 如果还没看上一篇的建议先查看后再来,上篇文章"linux入门系 ...

  6. java web 获取 网页访问次数

    ServletContext context = request.getServletContext(); /** * 从ServletContext中获取计数器对象 */Integer count ...

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

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

  8. 控制台报错Cause: org.xml.sax.SAXParseException; lineNumber: 4; columnNumber: 78; 元素类型 "select" 必须后跟属性规范 ">" 或 "/>"

    首先我的控制台报错是这样的,我找了一下原因看到是第四行的错误: 它说元素select后面必须跟属性规范">""/>"但是我把我眼睛都快丑瞎了都没发现 ...

  9. 在dev分支上修改了文件，但是并没有执行git add. 和git commit命令，然后切换到master分支，仍然能看到dev分支的改动现象

    当我们创建一个新的分支dev,并且在新分支上修改了原文件,在我们没有提交到仓库的前提下,将分支再切换到master分支上,执行git status ,可以看到dev操作的状态: (1)因为未add的内 ...

  10. 你能在泰坦尼克号上活下来吗？Kaggle的经典挑战

    Kaggle Kaggle是一个数据科学家共享数据.交换思想和比赛的平台.人们通常认为Kaggle不适合初学者,或者它学习路线较为坎坷. 没有错.它们确实给那些像你我一样刚刚起步的人带来了挑战.作为一 ...