<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

//ajax() 方法用于执行 AJAX（异步 HTTP）请求。

$(document).ready(function(){

    $("button").click(function(){

        $.ajax({url:"demo_test.txt",success:function(result){

            $("#div1").html(result);

        }});

    });

});

</script>

</head>

<body>

<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>

<button>获取其他内容</button>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

//load() 方法从服务器加载数据，并把返回的数据放入被选元素中

//function(agr1:响应文本,agr2:响应的状态,agr3:报错信息[object object])

/*

responseTxt - 包含调用成功时的结果内容

statusTXT - 包含调用的状态

xhr - 包含 XMLHttpRequest 对象

*/

$(document).ready(function(){

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

    $("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){

      if(statusTxt=="success")

        alert(xhr,"外部内容加载成功!");

      if(statusTxt=="error")

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

    });

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

    $("#div1").load("/try/ajax/demo_test.txt1",function(responseTxt,statusTxt,xhr){

      if(statusTxt=="success")

        alert(xhr,"外部内容加载成功!");

      if(statusTxt=="error")

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

    });

});

});

});

</script>

</head>

<body>

<div id="div1"><h2>使用 jQuery AJAX 修改该文本</h2></div>

<button id='btn1'>获取外部内容1</button>

<button id='btn2'>获取外部内容2</button>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<p>

demo_test.php :

<?php

echo '这是个从PHP文件中读取的数据。';

?>

</p>

<script>

/*

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

    GET - 从指定的资源请求数据

    POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

*/

$(document).ready(function(){

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

        $.get("/try/ajax/demo_test.php",function(data,status){

            alert("数据: " + data + "\n状态: " + status);//success

        });

    });

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

        $.post("/try/ajax/demo_test_post.php",{

            name:"菜鸟教程",

            url:"http://www.runoob.com"

        },

        function(data,status){

            alert("数据: \n" + data + "\n状态: " + status);

        });

    });

});

/*

data:

    name:"菜鸟教程",

    url:"http://www.runoob.com"

*/

</script>

</head>

<body>

<button id='btn1'>发送一个 HTTP GET  请求页面并获取返回内容</button>

<button id='btn2'>发送一个 HTTP POST 请求页面并获取返回内容</button>

</body>

</html>

jQuery(四)--HTTP请求的更多相关文章

  1. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  2. jQuery发送ajax请求

    利用jquery发送ajax请求的几个模板代码. $.ajax({ async : false, type: 'POST', dataType : "json", url: &qu ...

  3. JQuery发送ajax请求不能用数组作为参数

    JQuery发送ajax请求不能用数组作为参数,否则会接收不到参数, 一.js代码如下: $('#delete-button').click(function(){        var select ...

  4. HttpwebClient的四种请求方式

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷.      本文旨在发布代码,供自己参考,也供大家参考,谢谢. 正题: Ht ...

  5. Angular和jQuery的ajax请求的差别

    近期项目中使用angular,结果发现后台没法获取參数,所以,略微研究了一下两者在发送ajax时的差别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释con ...

  6. Jquery发送ajax请求以及datatype参数为text/JSON方式

    Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...

  7. jquery跨域请求数据

    jquery跨域请求数据 jquery跨越请求数据.实际开发中经常会碰到两个网站数据交互问题,当向另一个站点请求数据该如何做? 实际上非常容易,请按照下面的步骤做: 第一:编写js,通过get获取远程 ...

  8. SpringMVC的REST风格的四种请求方式

    一. 在HTTP 协议里面,四个表示操作方式的动词:GET.POST.PUT.DELETE. ·它们分别对应四种基本操作: 1.GET  ====== 获 取资源 2.POST ======新建资源 ...

  9. jquery 跨域请求数据问题

    昨天参加了一个前端的面试,被问到一个跨域请求数据问题,我们之前一直用的是apicloud的api进行请求的,跨域是被apicloud封装起来的,也就没有注意跨域请求数据的问题.当被问到用jquery跨 ...

随机推荐

  1. 【NLP_Stanford课堂】词形规范化

    一.为什么要规范化 在做信息检索的时候,一般都是精确匹配,如果不做规范化,难以做查询,比如用U.S.A去检索文本,结果文本里实际上存的是USA,那么实际上应该能查到的结果查不到了. 所以需要对所有内容 ...

  2. BeginInvoke和EndInvoke方法

    本系列教程主要包括如下内容:1. BeginInvoke和EndInvoke方法 2. Thread类 3. 线程池 4. 线程同步基础 5. 死锁 6. 线程同步的7种方法 7. 如何在线程中访问G ...

  3. 7.Zabbix 3.0 web监控

    请查看我的有道云笔记: http://note.youdao.com/noteshare?id=5f6b67f98a802fb831a83d810969c583&sub=B8D5267BDD5 ...

  4. 怎么在overflow-y:sroll的情况下 隐藏滚动条

    当我们的内容超出了我们的div,往往会出现滚动条,影响美观. 尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果.  我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的 ...

  5. Android（java）学习笔记7：多线程程序练习

    需求: 某电影院目前正在上映贺岁大片,共有100张票,而它有3个售票窗口售票,请设计一个程序模拟该电影院售票. 两种方式实现 A:继承Thread类 B:实现Runnable接 1. 首先我们利用方式 ...

  6. react中PropTypes与DefaultProps的应用

    每个组件都有自己的props参数,这参数是从父组件接收的一些属性,那么如何对参数的类型作校验.如何定义参数的默认值.这里涉及到两个基础的概念,叫做proptypes 和 defaultprops.子组 ...

  7. html题型

    1.doctype的意义是什么 这个是有历史背景的,在很久以前,IE有一些自己的渲染模式,最典型的就是盒子模型,包括边距.这就造成了不兼容模式,所以他的意义 1)让浏览器以标准模式渲染 2)让浏览器知 ...

  8. [19/03/13-星期三] 数组_二维数组&冒泡排序&二分查找

    一.二维数组 多维数组可以看成以数组为元素的数组.可以有二维.三维.甚至更多维数组,但是实际开发中用的非常少.最多到二维数组(我们一般使用容器代替,二维数组用的都很少). [代码示例] import ...

  9. Python Notes | Python 备忘笔记

    [ File IO ] parameters used in the file IO: 该参数决定了打开文件的模式:只读,写入,追加等.所有可取值见如下的完全列表.这个参数是非强制的,默认文件访问模式 ...

  10. 【luogu P3884 [JLOI2009]二叉树问题】 题解

    题目链接:https://www.luogu.org/problemnew/show/P3884 对方不想和你说话并向你扔了一个lca模板. #include <cstdio> #incl ...