WEB页面按钮不刷新？两种解决方案助你搞定！

前端

2023-07-12 09:38:58

使用 Callback 和 AJAX 实现按钮不刷新页面

在 Web 开发中，我们经常需要在点击按钮时仅更新页面上的部分内容。实现这一目标的常见方法有两种：Callback 和 AJAX。本文将介绍这两种方法，并展示如何在 ASP.NET 中使用它们来实现按钮不刷新页面的效果。

Callback

Callback 是一种服务器端处理的异步编程方式。当用户点击按钮时，浏览器向服务器发送一个请求。服务器处理请求并返回响应。然后，浏览器使用响应来更新页面。

优点：

服务器端可以对请求进行复杂的处理。
可以保证数据的一致性。

缺点：

性能较差，因为需要往返服务器。

如何使用 Callback

要在 ASP.NET 中使用 Callback，可以使用 ClientScript.RegisterStartupScript 方法。此方法将脚本代码注册到页面中，该脚本将在页面加载后执行。

<asp:Button ID="btnCallback" runat="server" Text="Click Me" OnClientClick="buttonCallback(this.id)" />

protected void buttonCallback(object sender, EventArgs e)
{
    // 服务器端处理代码

    string result = "Hello World!";

    // 将结果返回给客户端
    ClientScript.RegisterStartupScript(this.GetType(), "result", "alert('" + result + "');", true);
}

AJAX

AJAX（Asynchronous JavaScript and XML）是一种客户端处理的异步编程方式。当用户点击按钮时，浏览器向服务器发送一个请求。然后，浏览器使用服务器的响应来更新页面。

优点：

性能优于 Callback，因为不需要往返服务器。
可以提高页面的响应速度。

缺点：

客户端只能进行简单的处理。

如何使用 AJAX

要在 ASP.NET 中使用 AJAX，可以使用 XMLHttpRequest 对象。XMLHttpRequest 对象允许浏览器与服务器进行异步通信。

function buttonAjax(id) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "get_data.aspx?id=" + id, true);
    xhr.onload = function() {
        if (xhr.status == 200) {
            // 更新页面
        }
    };
    xhr.send();
}