程序博客网 > 网络歌手阿刚

jquery+ajax(2)

来源：互联网 发布：网络歌手阿刚 编辑：程序博客网 时间：2024/05/17 22:09

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>

<script type="text/javascript" src="jquery.jquery.js">

<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>

<div id="txt"><h2>通过 AJAX 改变文本</h2></div>
<button>改变内容</button>

</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>

运行结果图：







网络歌手阿刚 网络歌手阿刚
原创粉丝点击
热门IT博客
金山数据恢复手机版金山数据恢复手机版
云视通网络监控官网云视通网络监控官网
python sys模块详解
json属性遍历
去北极穿什么 知乎
几种编程语言的比较
sqlserver 认证
淘宝上买面膜可靠吗
socket编程qt
电视台 视频网站 知乎
设计网页软件下载
Js tap事件
淘宝评价会保留多久
算法设计是什么
淘宝批量充话费
java工厂模式概念
腾讯数据合作公司
组播编程
乌克兰胖爸 知乎
3g软件开发了解
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 窗户进风怎么办 尼龙毛刺怎么办 窗户锁扣坏了怎么办 窗户没有防盗网怎么办 塑钢窗户打不开怎么办 汽车锁打不开怎么办 药物服用过量怎么办 药物过量怎么办 密码锁锁死了怎么办 塑钢窗锁扣坏了怎么办 塑钢窗不好卸怎么办 百叶窗坏了怎么办 猫咪爬纱窗怎么办 牙齿缝发黑怎么办 挡风玻璃裂纹怎么办 镜子发霉擦不掉怎么办 车窗里面脏了怎么办 汽车车窗脏了怎么办 小孩门牙太大怎么办 门牙出现缝隙怎么办 被飞蠓咬了怎么办 耳朵进蚊子怎么办 屋里有蚊子怎么办 家里蚊子多怎么办 家里有蚊子怎么办 后挡风玻璃漏水怎么办 冬天窗子透风怎么办 房子外墙漏水怎么办 落地窗漏风怎么办 朔钢窗漏风怎么办 窗子漏风怎么办 铝合金窗漏风怎么办 窗户外墙漏雨怎么办 窗户上面漏水怎么办 窗户下边漏水怎么办 玻璃窗上油漆怎么办 门下方有缝怎么办 门框与少看有缝怎么办 窗台上方裂缝怎么办 牙结石严重怎么办 门牙出现裂纹怎么办

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里