在javascript的特定输出中将表单转换为json

我有这样一个表格：

<form>
    <div id="studentlist">
        <div class="studentRow">
            <input name="first" type="text" placeholder="First Name">
            <input name="last" type="text" placeholder="Last Name">
        </div>
        <div class="studentRow">
            <input name="first" type="text" placeholder="First Name">
            <input name="last" type="text" placeholder="Last Name">
        </div>
        <div class="studentRow">
            <input name="first" type="text" placeholder="First Name">
            <input name="last" type="text" placeholder="Last Name">
        </div>
    </div>
    <input id="send" value="Submit" type="submit">
</form>

我尝试使用，我称之为：

 $('#form').submit(function() {
        console.log( $('#form').serializeJSON() ) ;
        return false;
    });

但我得到的只是：

Object { first: "Peter", last: "Jones" }

有没有关于如何配置这个插件的提示

---

提前谢谢

这将是我个人的解决方案，但我认为使用PHP更容易做到这一点

首先，正确格式化HTML：

<form>
    <div id="studentlist">
        <div class="studentRow">
            <input name="students[0][first]" type="text" placeholder="First Name">
            <input name="students[0][last]" type="text" placeholder="Last Name">
        </div>
        <div class="studentRow">
            <input name="students[1][first]" type="text" placeholder="First Name">
            <input name="students[1][last]" type="text" placeholder="Last Name">
        </div>
        <div class="studentRow">
            <input name="students[2][first]" type="text" placeholder="First Name">
            <input name="students[2][last]" type="text" placeholder="Last Name">
        </div>
    </div>
    <input id="send" value="Submit" type="submit">
</form>

然后这将是我的Javascript，以获取您要查找的数组格式：

var x = $("#studentlist").find('input:last').attr('name').match(/^students\[([\d]+)\]/)[1];
var ary = [];
var obj = {};
for(var i = 0; i<=x; i++){
ary.push({first: $("input[name='students["+i+"][first]']").val(), last: $("input[name='students["+i+"][last]']").val()});
}
obj = { students: ary };
console.log(JSON.stringify(obj));

var x=$（“#studentlist”）.find（'input:last'）.attr（'name'）.match（/^students\[（[\d]+）\]/）[1]；
var ary=[]；
var obj={}；
对于（var i=0；i，这里有一段简单的代码创建所需的json

var studentsArray = $('.studentRow').map(function(){
    var data = $(':input', this).serializeArray();
    var obj = {};
    obj[data[0].name] = data[0].value;
    obj[data[1].name] = data[1].value;
    return obj;
}).get();
var students = {students: studentsArray};
var json = JSON.stringify(students);

由于您已经在使用
jquery
，因此这可能是解决方案之一：

html:



和jquery：

<script type="text/javascript">
jQuery(document).ready(function( $ ) 
{
  $('#form').submit(function(event) 
  {
    var students = [];
    var studentsObject = {};
    event.preventDefault();
    $('.studentRow').each(function()
    {
      students.push
      (
        { 
          first:$(this).find("input[name='first']").val(),
          last: $(this).find("input[name='last']").val()
        }
      );
    });
    studentsObject = {"students":students};
    console.log(JSON.stringify(studentsObject));
  });
});
</script>


jQuery（文档）.ready（函数（$）
{
$（'#表单'）。提交（函数（事件）
{
var学生=[]；
var studentsObject={}；
event.preventDefault（）；
$（'.studentRow'）。每个（函数（）
{
学生们，推
(
{ 
第一个：$（this.find）（“输入[name='first']”）val（），
last:$（this.find（“input[name='last']”）val（）
}
);
});
学生主题={“学生”：学生}；
log（JSON.stringify（studentsObject））；
});
});
我没有使用您引用的插件，但这里有一个类似于已经发布的解决方案。我的目的是让代码更易于理解，因此我将不同的任务划分为各自的功能

// Call this function with $('form'), and it will return the desired JSON
function getStudentsJson($form){
    var students = {
        "students": getStudents($form)
    };
    return JSON.stringify(students);
}

function getStudents($form){
    // Extract a list of student objects from the form
    // Each student object has the form {first, last}
    var students = [];
    $form.find(".studentRow").each(function(){
        students.push(getStudent(this));
    });
    return students;
}

function getStudent(row){
    // Extract the student object from a row, in the form {first, last}
    return { 'first': getFirstName(row), 'last': getLastName(row) };
}

function getFirstName(row){
    // Extract the input "first" from the row
    return $(row).find("input[name=first]").val();
}

function getLastName(row){
    // Extract the input "last" from the row
    return $(row).find("input[name=last]").val();
}

您是否尝试将
$（'#form'）.serializeJSON（）
传递给
JSON.stringify（）
？通过这种方式，我得到了
“{”first:“，”last:“}”
我假设您试图得到的是一个JSON字符串，而不是一个对象。您的表单是否已填写，或者哪里有值？
<script type="text/javascript">
jQuery(document).ready(function( $ ) 
{
  $('#form').submit(function(event) 
  {
    var students = [];
    var studentsObject = {};
    event.preventDefault();
    $('.studentRow').each(function()
    {
      students.push
      (
        { 
          first:$(this).find("input[name='first']").val(),
          last: $(this).find("input[name='last']").val()
        }
      );
    });
    studentsObject = {"students":students};
    console.log(JSON.stringify(studentsObject));
  });
});
</script>

// Call this function with $('form'), and it will return the desired JSON
function getStudentsJson($form){
    var students = {
        "students": getStudents($form)
    };
    return JSON.stringify(students);
}

function getStudents($form){
    // Extract a list of student objects from the form
    // Each student object has the form {first, last}
    var students = [];
    $form.find(".studentRow").each(function(){
        students.push(getStudent(this));
    });
    return students;
}

function getStudent(row){
    // Extract the student object from a row, in the form {first, last}
    return { 'first': getFirstName(row), 'last': getLastName(row) };
}

function getFirstName(row){
    // Extract the input "first" from the row
    return $(row).find("input[name=first]").val();
}

function getLastName(row){
    // Extract the input "last" from the row
    return $(row).find("input[name=last]").val();
}