Ajax load()方法

最新推荐文章于 2023-10-25 18:32:19 发布

无盐海

最新推荐文章于 2023-10-25 18:32:19 发布

阅读量5.2k

点赞数 1

分类专栏： AJAX | JSON

本文链接：https://blog.csdn.net/Fanbin168/article/details/45072967

版权

AJAX | JSON 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

《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;
            }
        }
    }
}

通过回调函数处理过后的数据：如下图

无盐海

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Ajax load()方法

《1》load()函数用于从服务器加载数据，并使用返回的html内容替换当前匹配元素的内容。load()函数默认使用GET方式，如果提供了对象形式的数据，则自动转为POST方式。因为默认使用的是Get请求方式，所以我们也可以在url加数据进行提交。例如$("#box").load("loadTest.html？name=zhang&age=25") Ajax
复制链接

扫一扫

专栏目录