jQuery学习笔录11（jQuery和ajax1-Load()& post()& get()）
jQuery对Ajax操作进行了封装。
最底层的方法：$.ajax()
第二层方法 ：$.load() , $.get() , $.post()
第三次方法：$.getScript() , $.getJSON()
Load()方法 ，通常用来从web服务器上获取静态的数据文件
Load()结构： load(url [,data] [,callback])
url: 类型 string ，请求HTML页面的URL地址
data: 类型Object ，发送至服务器的key or value数据
callback: 类型Function ，请求完成时的回调函数，无论请求成功或失败
例子Look
ajax.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ajax2.aspx.cs" Inherits="ajax_ajax2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script src="../scriptJquery/jquery-1.3.2.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" id="send" value="Ajax获取" />
<div class="comment">已有评论</div>
<div id="resText"></div>
</form>
</body>
</html>
<script>
$(function(){//等待dom元素加载完毕
$("#send").click(function(){
//$("#resText").load("test.html"); //页面加载
$("#resText").load("test.html .para");//筛选页面加载内容： url selector
})
})
</script>
test.html
<html >
<head>
<title>Untitled Page</title>
</head>
<body>
<div class="comment">
comments：
</div>
<div class="comment" >
<h6>zheng：</h6>
<p class="para">soft</p>
</div>
<div class="comment" >
<h6>Lee：</h6>
<p class="para">chair</p>
</div>
<div class="comment" >
<h6>King</h6>
<p class="para">floor</p>
</div>
</body>
</html>
$.get() & $.post()
$.get() & $.post()是jQuery中的全局函数
$.get()方法
$.get(url [,data] [,callback] [,type])
url:类型String ，请求的HTML页面的URL地址
data:类型Object ，发送到服务器的key或value，数据会作为Querystring附加到请求的URL中。
callback:类型Function ， 载入成功是回调函数（只有当Response的返回状态是success才调用该方法，这和load不一样），自动将请求结果和状态传递给该方法。
get的回调函数只有2个参数
function（data,textstatus）{
data :返回的内容，比如html片段，xml文档
textstatus：请求状态：success error timeout notmodified 4中
}
type：类型String，服务器返回内容的格式，比如xml，html，text，json等
例子,返回HTML片段：
ajax2.aspx
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script src="../scriptJquery/jquery-1.3.2.min.js"></script>
</head>
<body>
<form id="form1" runat="server" action="#">
<p>评论</p>
<p>姓名：<input type="text" name="username" id="username" /></p>
<p>内容：<textarea name="content" id="content" rows="2" cols="20"></textarea></p>
<p><input type="button" id="send" value="提交" /></p>
</form>
<div class="comment">已有评论：</div>
<div id="resText"></div>
</body>
</html>
<script>
$(function(){//等待dom元素加载完毕
$("#send").click(function(){
$.get("test2.aspx",
{ username:$("#username").val(),
content:$("#content").val()
},function(data,textstatus){
alert(data)
$("#resText").html(data);//返回的数据添加到页面上
})
})
})
</script>test2.aspx
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div class="comment">
comments：
</div>
<div class="comment" >
<h6>zheng：</h6>
<p class="para">soft</p>
</div>
<div class="comment" >
<h6>Lee：</h6>
<p class="para">chair</p>
</div>
<div class="comment" >
<h6>King</h6>
<p class="para">floor</p>
</div>
<div class="comment" >
<asp:Label ID="lbl" runat="server" ></asp:Label>
</div>
</form>
</body>
</html>
test2.aspx.cs
public partial class ajax_test2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string username = Request.QueryString["username"].ToString();
string content = Request.QueryString["content"].ToString();
lbl.Text= "<h6>"+username+"</h6><p class='para'>"+content+"</p>";
}
}
$.get()
将上面代码中$.get()改成$.post().
同时将querystring 改成form。运行。
另外，load()带有参数传递时，也可以使用load()方式实现同样的功能。
ajax2.aspx js脚本：
<script>
$(function(){//等待dom元素加载完毕
$("#send").click(function(){
$("#resText").load("test2.aspx",{
username: $("#username").val(),
content : $("#content").val()
})
})
})
</script>
test2.aspx.cs
public partial class ajax_test2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string username = Request["username"].ToString();
string content = Request["content"].ToString();
lbl.Text = "<h6>" + username + "</h6><p class='para'>" + content + "</p>";
}
}