javascript - 如何将jQuery中的输入类型传递给ajax

Question

我有一个基本的 Bootstrap 表单，我想通过 ajax 将输入类型传递给 php。我可以使用 serializeArray() 获取输入名称和值。

我如何扩展 serializeArray 的输出以包含输入“类型”？

---

更多信息...这是我当前的表格...

<form id="second_example_form" class="form-horizontal core_form_submission" action="#" method="post" data-callback="<?php echo __DIR__ . '/form-second-example.callback.php'; ?>">
<div class="form-group">
    <label class="col-sm-2 control-label" for="email">Email</label>
    <div class="col-sm-5">
        <input id="email" class="form-control" required type="email" placeholder="Email" name="email">
    </div>
    <div class="col-sm-5 messages"></div>
</div>
    <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Submit</button>
    </div>
</div>

这里是调用 js 的 ajax...

$('#form').on('submit', function(e) {

    e.preventDefault();

    var data = form.serializeArray();

    $.post('ajax/forms.ajax.php', {
            data: data
    }, function(r) {
        var json = JSON.parse(r);
    }
});

var data = form.serializeArray(); 非常适合传递名称和值...但不包括输入类型。

有人能帮忙吗？

Answer 1

Serialize 不提供，您必须构造所有类型的名称值并将其传递给您的服务器。

$('form').on('submit', function(e) {
  e.preventDefault();

  var formData = $(this).serializeArray();
  $('input, select', this).each(function() {
    formData.push({
      name: $(this).attr('name') + '_type',
      value: $(this).prop('tagName').toLowerCase()
    });
  });
  console.log(formData);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="second_example_form" class="form-horizontal core_form_submission" action="#" method="post" data-callback="<?php echo __DIR__ . '/form-second-example.callback.php'; ?>">
  <div class="form-group">
    <label class="col-sm-2 control-label" for="email">Email</label>
    <div class="col-sm-5">
      <input id="email" class="form-control" required type="email" placeholder="Email" name="email">
    </div>
    <div class="col-sm-5 messages"></div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>