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

Question

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

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

是否有带有控制台编码的全局有效命令，因为该网页不是我的？ (纯-JavaScript)

Answer 1

删除表单上的所有 submit 侦听器。然后用 js event.stopPropagation() break.

附加你自己的提交监听器

Answer 2

在 html 页面中使用表单时，表单中的值将提交给表单操作中给出的 url，而不检查 javascript 是否定义了一些回调函数.

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

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

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

方法一：从动作中调用javascript函数

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

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

方法 2： 使用 JQuery 表单 onSubmit

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

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

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

方法三：使用JQueryAjax验证提交

<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 和方法在表单中定义。 validate 函数将检查表单是否有效，submitHandler 将在表单有效时执行。 $(form).ajax提交回调函数将处理 ajax 对 URL 和给定表单的方法的调用。这种方法很适合你的问题。也可以尝试你需要的其他方法

NOTE: Refer https://jqueryvalidation.org/validate/ for documentation.

Answer 3

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

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

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

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

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

Javascript Console Commands Not Working After Ajax Sending Back in Page

javascript

javascript-objects

dom-events

browser-console