停止刷新表单，但要发布

Stop form from refreshing but do post

本文关键字：刷新 表单      更新时间：2023-09-26

我正在一个广播网站上工作，有一个播放器和一堆横幅，你可以点击在上面播放广播。

在我看来，理想的行为是，如果我点击按钮播放收音机，它就会跳到播放器上。但现在它刷新页面，并跳到页面顶部。这有点烦人。

  1. 我得到了一个有多个按钮的表单，这些按钮包含数据库中收音机的ID
  2. 然后我得到了我的玩家，在没有发布表单的情况下，打印一个默认玩家，在提交表单时，它会从数据库中加载所有需要的信息，并将ID发布给玩家

现在我的问题是，当表单发布到玩家时，如何阻止表单刷新并跳回页面顶部。

如果你们需要任何代码，我会把它发布在这里，但由于它在我的index.php上是一堆代码，我需要一个可以把它放在上面的网站。

您将希望使用Javascript（更具体地说：AJAX）来实现这一点。它可能看起来令人生畏，但尤其是与jQuery结合使用时，它是非常可行的。

这个想法基本上是在后台向不同的页面发送请求，而无需重新加载页面，并使用Javascript用新收到的信息更新当前页面。关于这个主题，有很多资源可以比我在这里更好地解释细节，但我希望这能给你足够的关键词：）

基于Web的广播播放器通常是SPAs（单页应用程序），因为重新加载页面会中断广播播放器。这意味着页面只加载一次，所有其他内容都是通过AJAX请求加载的，不需要重新加载整个页面。

有几个库可以用来实现这种体系结构（例如Angular.JS）。使用纯JS从头开始构建这样的体系结构很容易变得难以维护。

在这里你可以使用ajax，然后调用你的无线电播放器，这不是形式。。。查找以下示例。

$("button").click(function(){
    $.ajax({url: "demo_test.txt", 
            success: function(result){
                     $("#div1").html(result);
            }
    });
});

希望这会有所帮助。

相关文章：