jQuery(四)--HTTP请求

Posted on 2018-11-30 17:11  eilinge  阅读(6618)  评论(0)  编辑  收藏  举报 
<!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>