HTML表单的POST错误，忽略了jQueryAJAX指定的JSON格式

因此，主要问题似乎是由于某种原因，我的jQuery代码被完全忽略了。我的表单是POSTing数据，但它似乎是在常规的键值对中，而不是正确格式化的JSON。服务器接收的问题与这里完全相同：如何使用JQuery发布JSON数据？

直到我在HTML的表单部分添加了"action="和method="POST"，并在每个表单输入区域（文本框、下拉列表等）添加了"name="值，我的表单才开始发布。但现在它正在发布，它使用name="abc"作为每对中的第一个值，输入的值作为第二个值。为了测试这一点，我尝试删除了所有的jQuery，它仍然以完全相同的方式发布，即使代码中没有jQuery。下面是我的jQuery，旨在将我的四个输入POST为JSON。

<script>
$(document).ready(function() {
    env1.checked = true;
    $("button").click(function() {
        var x = {
            "apiName": $("#apinameid").val(),
            "apiURL": $("#apiurlid").val(),
            "environment": $("#envid").val(),
            "action": $("#actionid").val()
        }
        $.ajax({
            url: 'http://requestb.in/1kynzln1',
            type: 'POST',
            contentType: "application/json",
            dataType: "json",
            data: x,
            success: function(json) {
                alert(JSON.stringify(json));
            },
            error: function() {
                alert(data);
            }
        });
    });
});

这是我的HTML（可能相关的部分）

  <div class="section section-primary"><div class="container"><div class="row"><div class="col-md-12"><h1 class="text-center">Akana Server Proxy Configuration Portal</h1></div></div></div></div>
<div class="section section-warning">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h3 class="text-left">Please enter your API's information below:</h3>
      </div>
    </div>
  </div>
</div>
<div class="section section-warning">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <form action="http://requestb.in/1kynzln1"method="POST"role="form">
          <div class="form-group">
            <label class="control-label" for="exampleInputEmail1">API Name</label>
            <input name="apiName" class="form-control input-lg" id="apinameid" placeholder="Cat API" type="text">
          </div>
          <div class="form-group">
            <label class="control-label" for="exampleInputEmail1">API URL</label>
            <input name="apiURL" class="form-control input-lg" id="apiurlid" placeholder="http://cats.com/api" type="text">
          </div>
          <div class="form-group">
            <label class="control-label">Environment</label>
            <select name="environment" id="envid" class="form-control">
              <option value="Dev" id="devid">Dev</option>
              <option value="Stage" id="stgid">Stage</option>
              <option value="Prod" id="prodid">Prod</option>
            </select>
            </div>
          </div>
          <div class="form-group"></div>
          <div class="form-group">
            <label class="control-label">Configuration Action</label>
            <select name="action" id="actionid" class="form-control">
              <option value="Add" id="add">Add a new API</option>
              <option value="Remove" id="remove">Remove an API</option>
            </select>
            <p class="help-block">You can add or remove access to an API by configuring the proxy.</p>
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>

非常感谢您的帮助！非常感谢。