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. iframe 框架父页面刷新子页面

    1.父页面添加: <script> function testBtn(){   var reshSrc = document.getElementById('myFrame').src; ...

  2. jenkins-gitlab-harbor-ceph基于Kubernetes的CI/CD运用（三）

    从最基础镜像到业务容器 构建 [为gitlab项目部署做铺垫] 业务镜像设计规划 目录结构 # pwd /data/k8s/app/myapp # tree . . ├── dockerfile │  ...

  3. 论文速递 | 实例分割算法BlendMask，实时又state-of-the-art

    BlendMask通过更合理的blender模块融合top-level和low-level的语义信息来提取更准确的实例分割特征,该模型效果达到state-of-the-art,但结构十分精简,推理速度 ...

  4. JDBC（三）----JDBC控制事务

    ##  JDBC控制事务 1.事务:一个包含多个步骤的业务操作.如果这个业务员操作被事务管理,则这多个步骤要么同时成功,要么同时失败. 2.操作: 1.开启事务 2.提交事务 3.回滚事务 3.使用C ...

  5. 02.Go语言开发环境搭建（新版）

    安装Go语言及搭建Go语言开发环境 注意:Go语言1.14版本之后推荐使用go modules管理以来,也不再需要把代码写在GOPATH目录下了 下载 下载地址 Go官网下载地址:https://go ...

  6. 02 Python函数与模块

     • 函数是什么 print() input() format() list() lower() upper()  • 函数的定义 def 函数名(形参1,2,3)  函数体 return  • 函数 ...

  7. SVM支持向量机——核函数、软间隔

    支持向量机的目的是寻找一个能讲两类样本正确分类的超平面,很多时候这些样本并不是线性分布的. 由此,可以将原始特征空间映射到更高维的特征空间,使其线性可分.而且,如果原始空间是有限维,即属性数量有限, ...

  8. GBDT梯度提升树算法及官方案例

    梯度提升树是一种决策树的集成算法.它通过反复迭代训练决策树来最小化损失函数.决策树类似,梯度提升树具有可处理类别特征.易扩展到多分类问题.不需特征缩放等性质.Spark.ml通过使用现有decisio ...

  9. 强化学习之五：基于模型的强化学习（Model-based RL）

    本文是对Arthur Juliani在Medium平台发布的强化学习系列教程的个人中文翻译,该翻译是基于个人分享知识的目的进行的,欢迎交流!(This article is my personal t ...

  10. 关于getchar的疑惑

    最近做了一道题,我的代码有片段是这样的 while(scanf("%d",&n)) { if(n==0&&getchar()=='\n') break; . ...