jquery+ajax(2)

最新推荐文章于 2022-05-04 20:17:49 发布

平凡的Mac

最新推荐文章于 2022-05-04 20:17:49 发布

阅读量1.1k

点赞数

分类专栏： ajax jquery

jquery 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

ajax

8 篇文章 0 订阅

订阅专栏

jquery ajax $.post()和$.get()方法的区别

HTTP 请求：GET vs. POST

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

GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据

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

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

——————————————————————————————————————————————————————

1.ajax请求改变文本内容:

ajaxError()方法:当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。

1.load()方法

案例(1)

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
    $("#div1").load("jquery/demo.txt",function(responseTxt,statusText,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功！");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
});
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div>
<button>获得外部内容</button>
</body>
</html>

案例(2)

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$('#test').load('jquery/demo.txt');
})
})
</script>
</head>
<body>
<h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部的内容</button>
</body>
</html>

2.ajaxSend() 方法在 AJAX 请求开始时执行函数。它是一个 Ajax 事件

<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").ajaxSend(function(e,xhr,opt){
$(this).html("正在请求：" + opt.url);
});
$("button").click(function(){
$("div").load("jquery/demo.txt");
});
});
</script>
</head>
<body>
<div id="txt"><h2>通过 AJAX 改变文本</h2></div>
<button>改变内容</button>
</body>
</html>

3.ajaxStop() 方法在 AJAX 请求结束时执行函数。它是一个 Ajax 事件。

无论 Ajax 请求在何时完成 ,jQuery 都会检查是否存在其他 Ajax 请求。如果不存在，则 jQuery 会触发该 ajaxStop 事件。在此时，由 .ajaxStop() 方法注册的任何函数都会被执行

<html>

<head>

<scripttype="text/javascript">

$(document).rendy(function(){

$("div").ajaxStop(function(){
alert("所有 AJAX 请求已完成");
});
$("button").click(function(){
$("div").load("jquery/demo.txt");
$("div").load("jquery/demo.php");
});

})

</script>

</head>

<body>

</body>

</html>

4.ajax -get请求:

get() 方法通过远程 HTTP GET 请求载入信息。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

语法

$(selector).get(url,data,success(response,status,xhr),dataType)

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(response,status,xhr)	可选。规定当请求成功时运行的函数。额外的参数： response - 包含来自请求的结果数据 status - 包含请求的状态 xhr - 包含 XMLHttpRequest 对象
dataType	可选。规定预计的服务器响应的数据类型。默认地，jQuery 将智能判断。可能的类型： "xml" "html" "text" "script" "json" "jsonp"

案例:

<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("jquery/demo.txt",function(data,status){
alert("数据：" + data + "\n状态：" + status);
});
});
});
</script>
</head>
<body>
<button>向页面发送 HTTP GET 请求，然后获得返回的结果</button>
</body>
</html>

5.使用ajax获取json数据

getjson()

该函数是简写的 Ajax 函数，等价于：

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});

例子:

jquery/json.js:

{ 
  "firstName": "Bill",
  "lastName": "Gates",
  "age": 60
}

getjson.php:

<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$.getJSON("jquery/json.js",function(result){
$.each(result, function(i, field){
$("p").append(field + " ");
});
});
});
});
</script>
</head>
<body>
<button>获得 JSON 数据</button>
<p></p>
</body>
</html>

6.param()序列化对象:

<html>
<head>
<title>序列化对象</title>
</head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
personObj = new Object();
personObj.firstname = "Bill";
personObj.lastname ="las";
personObj.color = "red";
personObj.age="800";
personObj.sex="nan";
$("button").click(function(){
$("div").text($.param(personObj));
});
});
</script>
<body><button>序列化对象</button></body>
<div></div>
</html>

页面显示的效果是:firstname=Bill&lastname=las&color=red&age=800&sex=nan

7.$.ajax()方法

<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b01").click(function(){
//此处参数async中当为true时表示的ajax同步请求，当为false时表示的是异步请求
htmlobj=$.ajax({url:"jquery/demo.txt",async:false});
$("#myDiv").html(htmlobj.responseText); //jquery的html()方法是改变所选属性的 html内容
});
});
</script>
</head>
<body>
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="b01" type="button">改变内容</button>
</body>
</html>

8.ajaxstart()方法

当 AJAX 请求开始时，显示“加载中”的指示:

<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").ajaxStart(function(){
$(this).html("<img src='image/1.jpg' />");
});
$("button").click(function(){
$("div").load("jquery/demo.txt");
});
});
</script>
</head>
<body>
<div id="txt"><h2>通过 AJAX 改变文本</h2></div>
<button>改变内容</button>
</body>
</html>

图片:<img src='image/1.jpg' />为：

9.当 AJAX 请求成功完成时，触发提示框：

<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").ajaxSuccess(function(){
alert("AJAX 请求已成功完成");
});
$("button").click(function(){
$("div").load("jquery/demo.txt");
});
});
</script>
</head>
<body>
<div id="txt"><h2>通过 AJAX 改变文本</h2></div>
<button>改变内容</button>
</body>
</html>

10.$.post()方法

<!DOCTYPE html>
<html>
<head>
<script src = "jquery/jquery.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("jquery/demo.txt",
{
name:"lk",
city:"beijing"
},
function(data,status){
alert("数据：" + data + "\n状态：" + status);

});
});
});
</script>
</head>
<body>
<button>向页面发送 HTTP POST 请求，并获得返回的结果</button>
</body>
</html>

等价于:

该函数是简写的 Ajax 函数，等价于：

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

例子:

(1)无参数的方法调用.

大家注意了，这个版本不能低于.net framework 2.0。2.0已下不支持的。
后台代码：

[WebMethod]     
public static string SayHello()     
{     
     return "Hello Ajax!";     
}

JS代码：

$(function() {     
    $("#btnOK").click(function() {     
        $.ajax({     
            //要用post方式      
            type: "Post",     
            //方法所在页面和方法名      
            url: "Demo.aspx/SayHello",     
            contentType: "application/json; charset=utf-8",     
            dataType: "json",     
            success: function(data) {     
                //返回的数据用data.d获取内容      
                alert(data.d);     
            },     
            error: function(err) {     
                alert(err);     
            }     
        });     
    
        //禁用按钮的提交      
        return false;     
    });     
});

页面代码：

    <form id="form1" runat="server">
    <div>
        <asp:Button ID="btnOK" runat="server" Text="验证用户" />
    </div>
    </form>

运行效果如下：

(2).有参数方法调用
后台代码：

[WebMethod]     
public static string GetStr(string str, string str2)     
{     
    return str + str2;     
}

JS代码：

$(function() {     
    $("#btnOK").click(function() {     
        $.ajax({     
            type: "Post",     
            url: "demo.aspx/GetStr",     
            //方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字      
            data: "{'str':'我是','str2':'XXX'}",     
            contentType: "application/json; charset=utf-8",     
            dataType: "json",     
            success: function(data) {     
                //返回的数据用data.d获取内容      
                  alert(data.d);     
            },     
            error: function(err) {     
                alert(err);     
            }     
        });     
    
        //禁用按钮的提交      
        return false;     
    });     
});

运行效果如下：

(3)返回数组方法
后台代码：

[WebMethod]     
public static List<string> GetArray()     
{     
    List<string> li = new List<string>();     
    
    for (int i = 0; i < 10; i++)     
        li.Add(i + "");     
    
    return li;     
}

JS代码：

$(function() {     
    $("#btnOK").click(function() {     
        $.ajax({     
            type: "Post",     
            url: "demo.aspx/GetArray",     
            contentType: "application/json; charset=utf-8",     
            dataType: "json",     
            success: function(data) {     
                //插入前先清空ul      
                $("#list").html("");     
    
                //递归获取数据      
                $(data.d).each(function() {     
                    //插入结果到li里面      
                    $("#list").append("<li>" + this + "</li>");     
                });     
    
                alert(data.d);     
            },     
            error: function(err) {     
                alert(err);     
            }     
        });     
    
        //禁用按钮的提交      
        return false;     
    });     
});

页面代码：

 
         <form id= 
         "form1"  
         runat= 
         "server" 
         > 
        
         <div> 
        
         <asp:Button ID= 
         "btnOK"  
         runat= 
         "server"  
         Text= 
         "验证用户"  
         /> 
        
         </div> 
        
         <ul id= 
         "list" 
         > 
        
         </ul> 
        
         </form>