Ajax load()方法
发布时间：2020-12-16 02:02:48 所属栏目：百科 来源：网络整理
导读：《1》 load() 函数用于从服务器加载数据，并使用返回的html内容替换当前匹配元素的内容。 load()函数默认使用GET方式，如果提供了对象形式的数据，则自动转为POST方式。 因为默认使用的是Get请求方式，所以我们也可以在url加数据进行提交。 例如$("#box").lo
|
《1》 load()函数用于从服务器加载数据，并使用返回的html内容替换当前匹配元素的内容。 load()函数默认使用GET方式，如果提供了对象形式的数据，则自动转为POST方式。 例如$("#box").load("loadTest.html？name=zhang&age=25")
load()方法可以参数三个参数： url(必须，请求html 文件的url 地址，参数类型为String)
load()方法是局部方法，因为他需要一个包含元素的jQuery 对象作为前缀。例如$("#box").load() 而$.get()和$.post()是全局方法，无须指定某个元素。对于用途而言，.load()适合做静态文件的异步获取，
从另外一个页面加载数据到当前页<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;
}
}
}
}
通过回调函数处理过后的数据： 如下图
??
??
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
推荐文章
站长推荐
热点阅读