javascript - 使用 jQuery 发布表单数据

Question

我有一个在 Postman 中创建的工作请求。在此请求中，我将数据发布到 http://localhost:21124/submissions/[someId] 处的端点。在 Postman 中，我有一个名为 Content-Type 的 header 键，其值为 application/x-www-form-urlencoded。

在 Postman 的“正文”选项卡中，我选择了 x-www-form-urlencoded 单选按钮。然后我输入了许多键值对。当我发布此请求时，它成功运行。我现在正在尝试将此请求重建为 HTML 表单。

为了尝试将请求重建为 HTML 表单，我有:

      function submitClick() {
        var form = $('#myForm');
        $.ajax({
          url: '/submissions/2e5f7619-23a5-425c-a39c-97928e3c2f9a',
          data: form.serialize(),
          type: 'POST'
        });
    
        return false;
      }
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" method="post">
      <label for="emailAddress">Email address</label>
      <input type="email" id="emailAddress">
      
      <label for="name">Name</label>
      <input type="text" id="name">
    
      <button onclick="return submitClick();">Submit</button>
    </form>

当我单击“提交”按钮时，我在 Controller 中看不到我的值。当我通过 postman 发帖时，我可以成功看到它们。这意味着这些值以两种不同的方式发布。但是，我不确定为什么。有人可以向我解释一下其中的区别吗？

谢谢

Answer 1

您的表单元素没有任何“名称”属性。这是 jQuery 序列化元素并在请求数据中发送元素所必需的。

此外，您还可以使用 jQuery 的语法直接处理表单的 submit 事件，从而使脚本更加简洁:

脚本

$('#myForm').submit(function(event) {
  event.preventDefault(); //prevent a (default) full postback

  $.ajax({
    url: '/submissions/2e5f7619-23a5-425c-a39c-97928e3c2f9a',
    data: $(this).serialize(),
    type: 'POST'
  });
});

HTML

您尚未显示 Controller 代码，因此为了举例，我将假设服务器期望接收的字段名称与表单元素的 ID 属性相匹配。但是，您需要确保它们与 Controller 期望的内容匹配，以便 Controller 能够识别它们。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" method="post">
  <label for="emailAddress">Email address</label>
  <input type="email" id="emailAddress" name="emailAddress">
  <label for="name">Name</label>
  <input type="text" id="name" name="name">
  <button type="submit" id="submitMyForm" name="submitMyForm" >Submit</button>
</form>