javascript - Ajax 在页面中发回后，Javascript 控制台命令不起作用

Question

我在 Chrome 开发者控制台中控制一个网站。有一个表单和一个提交按钮，用于通过 ajax（我猜）发送表单而无需刷新页面。发送信息后表单正在重置。

我使用 Javascript 为页面中的表单元素分配了一些属性。有些过程无关紧要，我正在发送表单，但元素的属性正在新表单中重置。我被迫再次调用相同的脚本。

无论如何，是否有带有控制台编码的全局有效命令，因为该网页不是我的？（在纯 JavaScript 中）

Answer 1

有几种方法可以实现这一目标。

最简单的：可能是在 Web 开发人员工具中创建一个片段，然后从那里运行它。

另一种方式是创建一个可以在页面上注入内容脚本或执行脚本的 google 扩展程序（具有“declarativeContent”和“activeTab”权限）。

您可以在此处找到有关开发 chrome 扩展和后台页面事件的更多信息：https ://developer.chrome.com/extensions/background_pages

Answer 2

在 html 页面中使用表单时，如果定义了某些回调函数，则表单内的值会提交到表单操作中给出的 url，而无需检查 javascript。

<form method="post" action="your_url">
  ....
</form>

如果您不提供操作，则表单将提交到同一页面，并且不会发生任何 javascript 操作。

如果您想使用 javascript 操作提交表单，则可以使用以下方法之一。

方法一：从action调用javascript函数

<form method="" action="Javascript:your_function()">
  ....
</form>
<script>
function your_function(){
  ...
}
</script>

在此方法中，所有表单验证和 ajax 提交都应在函数内部手动执行。URL 和 METHOD 也应该在 ajax 调用中定义。

方法二：使用 JQuery 表单 onSubmit

<form id="target" method="" action="">
....
</form>

<script>
$( "#target" ).submit(function( event ) {
  event.preventDefault();
  alert( "Handler for .submit() called." );
});
</script>

在这种方法中，表单验证被处理，并且只有在表单被验证时才会回调提交函数。ajax url 应该在 ajax 调用中给出。

方法三：使用 JQuery Ajax 验证提交

<form id="target" method="post" action="your_url">
....
</form>

<script>
$("#target").validate({
  submitHandler: function(form) {
    $(form).ajaxSubmit({
      dataType:  'json',    //optional
      success: function(data) {
        ...
      }
    })
  }
})
</script>

在此方法中，URL 和 METHOD 在表单中定义。validate 函数会检查表单是否有效，当表单有效时 submitHandler 会执行。$(form).ajaxSubmit 回调函数将处理给定表单的对 URL 和 METHOD 的 ajax 调用。这种方法很适合您的问题。还可以尝试其他需要的方法

注意：有关文档，请参阅https://jqueryvalidation.org/validate/。

Answer 3

删除submit表单上的任何侦听器。js event.stopPropagation()然后用break附加你自己的提交监听器。