<!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. 卸载Gac里被windows installer所reference的assembly的方法

    HKEY_LOCAL_MACHINE\Software\Classes\Installer\Assemlies\Global下找到要删除的assembly的那一项, 删除. 然后再gacutil /u ...

  2. Android 自定义倾斜字体

    public class RotateTextView extends AppCompatTextView { private static final int DEFAULT_DEGREES = 0 ...

  3. matlab练习程序(广度优先搜索BFS、深度优先搜索DFS)

    如此经典的算法竟一直没有单独的实现过,真是遗憾啊. 广度优先搜索在过去实现的二值图像连通区域标记和prim最小生成树算法时已经无意识的用到了,深度优先搜索倒是没用过. 这次单独的将两个算法实现出来,因 ...

  4. 一个简单的 HTML 文档,带有最基本的必需的元素

    <html> <head> <title>文档的标题</title> </head> <body> 文档的内容... ... & ...

  5. C# WinForm 程序免安装 .NET Framework(XP/win7/win10环境运行)

    前文 首先感谢群里的大神宇内流云 提供的anyexec for windows版本. 经过本人搭建虚拟机在xp环境 使用anyexec运行winfrom程序后,测试通过,如下是用的xp运行winfro ...

  6. 长大Tips

    队名:CW 队员: B20150304403 王香辉 B20150304408 李孟君 B20150304411 曾翡 B20150304414 吴海波 B20150304430 文淼 B201503 ...

  7. C语言 条件编译(if )

    #include <stdio.h> #define NUM -1 int main(int argc, const char * argv[]) { #if NUM > 0 pri ...

  8. 线程概念的外延 Threading Terminology-What Are Threads

    https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/Multithreading/AboutThrea ...

  9. BZOJ1820:[JSOI2010]Express Service 快递服务(DP)

    Description 「飞奔」快递公司成立之后,已经分别与市内许多中小企业公司签订邮件收送服务契约.由于有些公司是在同一栋大楼内,所以「飞奔」公司收件的地点(收件点)最多只有m点 (1, 2, …, ...

  10. 【洛谷5283】[十二省联考2019] 异或粽子(可持久化Trie树+堆)

    点此看题面 大致题意: 求前\(k\)大的区间异或和之和. 可持久化\(Trie\)树 之前做过一些可持久化\(Trie\)树题,结果说到底还是主席树. 终于,碰到一道真·可持久化\(Trie\)树的 ...