Question

我正在为我的网站使用ZURB Foundation 6.4（ZURB模板）。我想测试一下我新实现的后端，并尝试收集一些输入，并通过jquery AJAX将其发送到我的php后端。

与此同时，我设法做到了，但是遇到了一个非常奇怪的问题。我使用了以下构建块： https://foundation.zurb.com/building-blocks/blocks/floated-label-wrapper.html

我做了一些修改，但仅涉及id和占位符之类的东西，没有任何功能。最后，我将此标记用作我生成的其中一个视图的一部分：

<form class="callout text-center">
  <h2>Become A Member</h2>
  <div class="floated-label-wrapper">
    <label for="full-name">Forename</label>
    <input type="text" id="forenameInput" name="forename input" placeholder="forename">
  </div>
  <div class="floated-label-wrapper">
    <label for="email">Surname</label>
    <input type="text" id="surnameInput" name="surname input" placeholder="surname">
  </div>
  <div class="floated-label-wrapper">
    <label for="pass">Email</label>
    <input type="email" id="emailInput" name="email input" placeholder="email">
  </div>
<button class="button expanded" id="submitUserDataButton">Sign up</button>
</form>

最后的按钮曾经是类型为commit的输入，我将其更改为按钮，因为它更适合我的需求。但是，只要将按钮/输入嵌套在表单元素中，输入和按钮的行为就始终相同：

单击它后，该站点将重新加载，被调用的函数将执行到它击中我的ajax为止。现在为了完整起见，我将在此处发布AJAX（它被intp包装/由另一个函数调用，但这在这里无关紧要）：

function sendUserDataToBackend(userDataInputCollection){
  console.log("sendUserDataToBackend was entered")
  return  $.post("http://localhost:8099/test2.php"

    }).then((response) => {
      console.log(response)
    })
}

它进入了功能并且console.log发生了，然后……什么也没有。 AJAX本身从未执行过。我真的不知道为什么会这样，我只是想出了如何规避它的方法。我只是将按钮放在form元素之外，一切正常。

现在，为什么呢？为什么将按钮嵌套在form元素内会引起此类麻烦，例如导致页面重新加载，甚至阻止AJAX调用发生？我的意思是，表单是用于接收输入并将其发送到后端的，不是吗？还是以某种方式“变老”而应避免使用它们？这些元素如何起作用，它们的“副作用”是什么？

编辑：这是请求的处理程序代码

处理程序的逻辑从文件A导出

export async function executeRegistration(){
  let userDataInputCollection = getUserDataInput()
  userDataInputCollection = JSON.stringify(userDataInputCollection)
  console.log(userDataInputCollection)
  await sendUserDataToBackend(userDataInputCollection)
}

function getUserDataInput(){

  let userDataForename = $('#forenameInput').val()
  let userDataSurname = $('#surnameInput').val()
  let userDataMail = $('#emailInput').val()

  let userDataInputCollection = {
    forename : userDataForename,
    surname : userDataSurname,
    email : userDataMail
  }

  return userDataInputCollection
}

function sendUserDataToBackend(userDataInputCollection){
  console.log("sendUserDataToBackend was entered")
  return  $.post("http://localhost:8099/test2.php", {
      userDataInputCollection : userDataInputCollection
    }).then((response) => {
      console.log(response)
    })
}

并导入到文件B，该文件通过jquery附加在这里：

import * as registrationJS from "./lib/registrationLogic.js"

$('#submitUserDataButton').on('click', function(){
  registrationJS.executeRegistration()
})

Answer 1

单击提交按钮将提交表单。 这就是提交按钮的目的！。

浏览器将离开该页面（并加载新页面）。在旧页面中运行的JavaScript将被取消（因为JS在该页面中运行，导致该页面退出程序）。

如果要使用Ajax代替常规表单提交，则需要阻止常规表单提交。

请注意，最佳实践也是绑定到表单的Submit事件，而不是按钮的click事件。这样可以更好地捕获不使用按钮触发的表单提交。

替换：

$('#submitUserDataButton').on('click', function(){
  registrationJS.executeRegistration()
})

使用：

$('form').on("submit", function (event) {
    event.preventDefault();
    registrationJS.executeRegistration();
});

在<form>中嵌套<button>会导致意外行为

1 个答案: