javascript - 序列化表单以便通过 Ajax 发送它

Question

我想通过 Ajax 发送表单，而不是通过提交 按钮。

我在下面的代码摘录中定义了如下形式，后来我定义了 jQuery 函数来捕获 CREATE BUTTON 操作。

当我调试这个时，我得到了那个

console.log($('#customer_form').serialize());不抛出任何东西。

• 这是序列化表单的正确方法吗？
• 按钮是否需要在 <form></form> 内元素？

这里是使用的代码:

HTML:

<form id="customer_form" role="form">

    <div class="form-group">
        <label class="col-sm-4 control-label" for="name">Name</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="name" aria-describedby="name_help" placeholder="Name">
            <small id="name_help" class="form-text text-muted"></small>
        </div>
    </div>


    <div class="form-group">
        <label class="col-sm-4 control-label" for="address_line_1">Address</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="address_line_1" aria-describedby="address_line_1_help" placeholder="Address Line 1">
            <small id="address_line_1_help" class="form-text text-muted"></small>
        </div>
    </div>


    <div class="form-group">
        <label class="col-sm-4 control-label" for="address_line_2"></label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="address_line_2" aria-describedby="address_line_2_help" placeholder="Address Line 2">
            <small id="address_line_2_help" class="form-text text-muted"></small>
        </div>
    </div>


    <div class="form-group">
        <label class="col-sm-4 control-label" for="town">Town</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="town" aria-describedby="town_help" placeholder="Town">
            <small id="town_help" class="form-text text-muted"></small>
        </div>
    </div>

    <button id="create" class="btn btn-sm btn-primary pull-right m-t-n-xs" type="button"><strong>Save</strong></button>

</form>

JavaScript:

$(document).ready(function(){
    $('#create').click(function(event) {
        console.log('foo');
        alert($('#customer_form').serialize());
        event.preventDefault();
    });
});

Answer 1

您刚刚忘记将 name 属性添加到您的输入中:

<input name="nameofInput" .... />
-------^

请看下面的片段:

$(document).ready(function(){
      $('#create').click(function(event) {
          console.log('foo');
          alert($('#customer_form').serialize());
          event.preventDefault();
      });
  });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="customer_form" role="form">

    <div class="form-group">
        <label class="col-sm-4 control-label" for="name">Name</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" name="name" id="name" aria-describedby="name_help" placeholder="Name">
            <small id="name_help" class="form-text text-muted"></small>
        </div>
    </div>


    <div class="form-group">
        <label class="col-sm-4 control-label" for="address_line_1">Address</label>
        <div class="col-sm-8">
            <input type="text" class="form-control"  name="adress1" id="address_line_1" aria-describedby="address_line_1_help" placeholder="Address Line 1">
            <small id="address_line_1_help" class="form-text text-muted"></small>
        </div>
    </div>


    <div class="form-group">
        <label class="col-sm-4 control-label" for="address_line_2"></label>
        <div class="col-sm-8">
            <input type="text" class="form-control" name="adress2" id="address_line_2" aria-describedby="address_line_2_help" placeholder="Address Line 2">
            <small id="address_line_2_help" class="form-text text-muted"></small>
        </div>
    </div>


    <div class="form-group">
        <label class="col-sm-4 control-label" for="town">Town</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" name="town" id="town" aria-describedby="town_help" placeholder="Town">
            <small id="town_help" class="form-text text-muted"></small>
        </div>
    </div>

    <button id="create" class="btn btn-sm btn-primary pull-right m-t-n-xs" type="button"><strong>Save</strong></button>

</form>