在我的表单按钮上调用 submit() 和 reload() 不起作用

Posted 2023-05-09

【中文标题】在我的表单按钮上调用 submit() 和 reload() 不起作用

【英文标题】：calling submit() and reload() on my form button doesnt work

【发布时间】：2021-04-04 00:49:12

【问题描述】：

我有一个带有滑块的表单，有人可以用它来评价图片。拖动滑块时应提交表单，因此“onmousup”。这工作正常。但是，应该刷新页面，以便用户所做的评分已经提交。这一切都发生在索引页面上，因此用户滚动到的位置不应该丢失。 我试图制作这样的滑块：

<%= f.range_field :score, class:"form-control-range slider", id:"formControlRange", onMouseUp:"submit(); reload(); " %>
...
<script>
  function reload() 
    console.log("hi");
    location.reload;
  
</script>

这样我希望在onMouseUp事件发生时，先提交页面，然后重新加载页面，从而显示用户的评分。如果我有没有“reload()”功能的滑块，则提交表单，但我必须手动重新加载才能显示更改。 不知何故，调用像这样的滑块并不能实现这两个功能。只执行最先调用的函数。 我在其他线程中看到有像onMouseUp:"submit() && reload()" 这样的滑块，但这对我也不起作用...... 你有办法让这个工作吗？或者您是否知道如何更好地完成重新加载。 非常感谢你的帮助！ 文森特

更新：

我找到了一种不同的方法，当我像这样为重新加载功能设置计时器时，它实际上可以工作：

  function reload() 
    console.log("hi");
     setTimeout(function() 
  
    location.reload();  //Refresh page
  , 50);
  

现在有趣的是它可以工作 50 毫秒，但不是 5 毫秒。这表明它与订单有某种关系。有人知道如何告诉代码仅在提交表单后重新加载页面吗？

【问题讨论】：

向我们展示“submit()”的代码。此外，您永远不会调用 location.reload.... 缺少 ()

会很想通过 ajax 来做到这一点，这样你就不必重新加载整个页面。

如果您实际上是在默认表单提交过程中提交表单，那么问题在于后端没有返回更新的页面。你不能同时做这两个过程

我刚刚更新了帖子，提供了新信息……这有什么帮助吗？

【参考方案1】：

您输入了location.reload，缺少() 来调用方法。

请贴出submit()函数的代码。

【讨论】：

没有 submit() 函数，这已经在 rails 的后端做了。这个话题有问题吗？

我也尝试过使用 location.reload()，但它似乎没有改变任何东西......

【参考方案2】：

location.reload是一个函数，需要将其作为函数调用：

  function reload() 
    console.log("hi");
    location.reload();
  

但这本身并不能解决问题，因为您正在提交然后重新加载。如果重新加载比提交时执行的操作快怎么办？然后你的旧状态被重新加载。如果提交操作失败怎么办？

如果我们假设您保持当前方法，那么您需要在重新加载（或重新渲染）之前以某种方式进行提交和同步。如果有错误，显示错误。

您可以使用 AJAX 做到这一点。或者，如果您更喜欢 post 和 submit，那么您的服务器可以重新发送输出作为对 post 的响应，浏览器可以很好地处理。

我个人更喜欢执行 AJAX 请求、处理响应并刷新 UI 中要更改的部分。

编辑

这是发送 AJAX 请求的方式：

function sendRequest(type, url, callback, async, params) 
    if (async !== false) async = true;
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = callback;
    xhttp.open(type, url, async);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send(params);

调用这个函数，比如：

sendRequest("POST", "yoururl", reload, true, yourparams);

reload 是你的函数如上修改，yourparams 是一组参数，如"firstparam=firstvalue&secondparam=secondvalue"。

【讨论】：

感谢编辑，这听起来不错，但似乎真的很复杂......我尝试过这样实现它，但调用 sendRequest("POST", "posts_path",重新加载，真实，你的参数）；我认为“POST”和“yoururl”在路上......我应该用posts_path替换yoururl吗？我也不知道 xhttp 的东西，我可以像那样实现它还是应该在那里更改任何东西以使其与我在问题中发布的代码兼容？

@VincentWittek yoururl 只是代表您的 URL 的名称。 sendRequest 本身就很好，您的浏览器支持它。如果您的请求方法是 post，则“POST”是正确的。如果没有，则传递适当的请求方法。 xhttp 只是一个 XMLHttpRequest 实例，您可以在文档中阅读有关此内容的信息，但您需要的基本信息是，这是一个可用于发送 XML Http 请求的对象（AJAX 代表异步 javascript 和 XML）。