《1》
load()函数用于从服务器加载数据,并使用返回的html内容替换当前匹配元素的内容。
load()函数默认使用GET方式,如果提供了对象形式的数据,则自动转为POST方式。
因为默认使用的是Get请求方式,所以我们也可以在url加数据进行提交。
例如$("#box").load("loadTest.html?name=zhang&age=25")
load()方法可以参数三个参数:
url(必须,请求html 文件的url 地址,参数类型为String)
data(可选,发送的key/value 数据,参数类型为Object)
callback(可选,成功或失败的回调函数,参数类型为函数Function)
load()方法是局部方法,因为他需要一个包含元素的jQuery 对象作为前缀。例如$("#box").load()
而$.get()和$.post()是全局方法,无须指定某个元素。对于用途而言,.load()适合做静态文件的异步获取,
而对于需要传递参数到服务器页面的,$.get()和$.post()更加合适。
从另外一个页面加载数据到当前页
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Ajax</title>
<script src="jquery-1.11.2.js"></script>
<style type="text/css">
</style>
</head>
<body>
<input type="button" id="loadData" value="异步加载数据" />
<div id="box"></div>
</body>
</html>
<script type="text/javascript">
$(function () {
//----------------------如何从另外一个页面加载数据到当前页
$("#loadData").click(function(){
$("#box").load("loadTest.html"); //将locdTest.html页面里面的数据通过异步的形式加载到当前页面中的#box元素中。
})
$("#loadData").click(function () {
$("#box").load("loadTest.html p"); //把locdTest.html页面中的<p>标签通过异步的形式加载到当前页面中的#box元素中。
})
$("#loadData").click(function () {
$("#box").load("loadTest.html .para"); //把locdTest.html页面中的class属性值为para的标签通过异步的形式加载到当前页面中的#box元素中。
})
$("#loadData").click(function () {
$("#box").load("loadTest.html #city"); //把locaTest.html页面中id属性值为city的标签通过异步形式加载到当前页面中的#box元素中
})
$("#loadData").click(function () {
$("#box").load("loadTest.html #a p"); //把locaTest.html页面中id属性值为a的元素下面的<p>标签通过异步形式加载到当前页面中的#box元素中
})
})
</script>
如何从服务器加载数据到当前页
请求页代码
<html>
<head>
<title>Ajax</title>
<script src="jquery-1.11.2.js"></script>
</head>
<body>
<label for="UserId">请输入用户的ID编号:</label><input type="text" id="UserId" name="UserId" style="width:20px" />
<input type="button" id="loadData" value="异步加载数据" />
<div id="box"></div>
</body>
</html>
<script type="text/javascript">
$(function () {
//----------------------如何从服务器加载数据到当前页
$("#loadData").click(function () {
var userId = $("#UserId").val();
if (userId.length<=0) {
alert("请输入您要查找数据的编号!");
return;
}
//Get传值方式
//$("#box").load("loadHandler.ashx?id=" + userId); //load()函数默认使用GET方式
//Post传值方式
//$("#box").load("loadHandler.ashx", { id: userId }); //load()函数默认使用GET方式,如果提供了对象形式的数据,则自动转为POST方式。
//我们再来看看第三个参数回调函数
$("#box").load("loadHandler.ashx", { id: userId }, function (data, status, jqXHR) {
alert(data); // data是请求成功后返回的数据
alert(status); //打印出:success 如果请求成功后返回的状态值就是 success 如果请求失败返回的状态值是error
alert(jqXHR.status); //打印出:200 打印出当前请求的Http状态码 例如:200,403,405,505等等。 200表示服务器成功的返回了数据
alert(jqXHR.statusText); //打印出:OK
if (status == "success")
{
$("#box").html(data + "哈哈"); //在请求成功后,我们还可以对数据进行一下处理。
}
})
})
})
</script>
服务器代码
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
namespace jqueryTest
{
/// <summary>
/// loadHandler 的摘要说明
/// </summary>
public class loadHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";
string id = context.Request["id"];
string userInfo= GetByIdData(Convert.ToInt32(id));
if (userInfo == "")
{
context.Response.Write("你查找的数据不存在");
return;
}
else
{
context.Response.Write(userInfo);
}
}
public string GetByIdData(int id)
{
string connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;
using (SqlConnection conn = new SqlConnection(connStr))
{
conn.Open();
using (SqlCommand cmd = conn.CreateCommand())
{
cmd.CommandText = "select * from T_UserInfo where id=@id";
SqlParameter sp = new SqlParameter("@id", id);
cmd.Parameters.Add(sp);
DataTable dt = new DataTable();
using (SqlDataAdapter adapter = new SqlDataAdapter(cmd))
{
adapter.Fill(dt);
}
if (dt.Rows.Count <= 0 || dt.Columns.Count <= 0)
{
return "";
}
string str=null;
for (int i = 0; i < dt.Columns.Count; i++)
{
str += dt.Rows[0][i].ToString()+ " | "; //获取第一行第i列的数据
}
return str; //返回第一行的所以数据
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
通过回调函数处理过后的数据: 如下图