Question

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

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

在尝试将请求重建为HTML表单时，我有：

＆＃13;

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

＆＃13;

<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>

＆＃13;

当我点击＆＃34;提交＆＃34;按钮，我没有在控制器中看到我的值。当我通过Postman发帖时，我可以成功地看到它们。这意味着值以两种不同的方式获得POST。但是，我不确定为什么。有人可以向我解释一下这个区别吗？

由于

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

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

<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>

使用jQuery发布表单数据

1 个答案: