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. vscode在执行 npm任务的时候，会先执行package的name@version 然后命令名 加 当前路径，问题是我的引入路径e是小写的，会导致调试错误，解决方案：没找到，先手书吧

    vscode在执行 npm任务的时候,会先执行package的name@version 然后命令名 加 当前路径,问题是我的引入路径e是小写的,会导致调试错误,解决方案:没找到 Executing t ...

  2. isEmpty 判空函数 内部分别判断是 null 空数组 等

    import { oneOf, isEmpty } from '@/libs/tools' export const isEmpty = (value) => { if (value == nu ...

  3. 手动生成WebService代理类

    方式一: 手动生成WebService代理类需要把一句生成语句,如 wsdl.exe /l:cs /out:D:/ProxyServices.cs http://localhost/WebServic ...

  4. [Linux][C][gcc] Linux GCC 编译链接 报错ex: ./libxxx.so: undefined reference to `shm_open'

    本人原创文章,文章是在此代码github/note的基础上进行补充,转载请注明出处:https://github.com/dramalife/note. 以librt丶用户自定义动态库libxxx 和 ...

  5. 两个奇技淫巧，将 Docker 镜像体积减小 99%

    原文链接:Docker Images : Part I - Reducing Image Size 对于刚接触容器的人来说,他们很容易被自己构建的 Docker 镜像体积吓到,我只需要一个几 MB 的 ...

  6. Swift5.2 新特性

    Print 函数传参新格式 let param = "参数" print(#"这是一个\#(param) xxxxx"#) 允许在模块中定义和标准库中名称一样的 ...

  7. hdu1035 机器人走格子，格子指明方向，问几步走出格子或者是否有形成圈

    只要根据格子的方向选择下一步搜索的方向即可,退出条件是出界或者进入环中,进入环中的条件也很好确定,就是一个点走了两次,由于路径是固定的,这就会陷入无限循环. #include<iostream& ...

  8. Serpent.AI - 游戏代理框架（Python）

    Serpent.AI - 游戏代理框架(Python) Serpent.AI是一个简单而强大的新颖框架,可帮助开发人员创建游戏代理.将您拥有的任何视频游戏变成一个成熟的实验的沙箱环境,所有这些都是熟悉 ...

  9. GitHub也会断供：美国制裁地区帐号都受限，毫无预警，个人页面直接404

    请注意,GitHub也有断供危机. 如果你有GitHub私有库,是时候重新思考安全性,也是时候制定备份策略. 这不是杞人忧天,也不只温馨提示,而是已经发生的事实. 一位伊朗程序员,一觉醒来GitHub ...

  10. nginx 配置反向代理解决请求跨域问题

    server { listen ; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; roo ...