javascript - 如何使用 jquery 创建 JSON 每个输入值

Question

我想以 JSON 格式打印一些数据以供其他应用程序使用。 我应该如何构造 Javascript 对象来动态创建 JSON 格式。

这是我的 HTML 代码:

<div class="col-sm-6">
    <div class="form-group">
        <input type="text" class="form-control" name="frstname" data-conv="json">
        <input type="text" class="form-control" name="lastname" data-conv="json">
        <select name="gender" class="form-control" data-conv="json">
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select>
        <input type="date" class="form-control" name="dob" data-conv="json">
        <input type="text" class="form-control" name="email" data-conv="json">
    </div>
    <div class="form-group">
        <button type="button" class="btn-action" class="btn btn-default">Create</button>
    </div>
</div>

我尝试使用以下 Jquery 代码:

$(document).ready(function(){
    $('.btn-action').on('click', function(){

        var jsonObj = [];
        $("input[data-conv=json]").each(function() {
            var firstname = $(input[name=frstname]).val();
            var lastname  = $(input[name=lastname]).val();
            var gender    = $(input[name=gender]).val();
            var dob       = $(input[name=dob]).val();
            var email     = $(input[name=email]).val();

            item = {}
            item ['firstname']  = firstname;
            item ['lastname']   = lastname;
            item ['gender']     = gender;
            item ['dob']        = dob;
            item ["email"]      = email;

            jsonObj.push(item);
        });
        var jsonString = JSON.stringify(jsonObj);
        console.log(jsonString);
    });
});

我收到错误:

Uncaught ReferenceError: input is not defined

任何帮助将不胜感激!

Answer 1

我收到错误:

Uncaught ReferenceError: input is not defined

您需要使用 ' 或 " 将每个输入包装在选择器中:

var firstname = $('input[name=frstname]').val();
var lastname  = $('input[name=lastname]').val();
var gender    = $('input[name=gender]').val();
var dob       = $('input[name=dob]').val();
var email     = $('input[name=email]').val();

与您在这里所做的相同:

$("input[data-conv=json]").each(function() {

不过，如果您有 1 个带有这些控件的论坛，则您不需要每个:-

$(document).ready(function(){
    $('.btn-action').on('click', function(){

        var jsonObj = [];

        var firstname = $('input[name=frstname]').val();
        var lastname  = $('input[name=lastname]').val();
        var gender    = $('input[name=gender]').val();
        var dob       = $('input[name=dob]').val();
        var email     = $('input[name=email]').val();

        item = {}
        item ['firstname']  = firstname;
        item ['lastname']   = lastname;
        item ['gender']     = gender;
        item ['dob']        = dob;
        item ["email"]      = email;

        jsonObj.push(item);

        var jsonString = JSON.stringify(jsonObj);
        console.log(jsonString);
    });
});

但是如果你有多个元素，你需要给元素周围的组一个类:-

<div class="form-group inputs-group">
        <input type="text" class="form-control" name="frstname" data-conv="json">
        <input type="text" class="form-control" name="lastname" data-conv="json">

然后使用find来each:

$(document).ready(function(){
    $('.btn-action').on('click', function(){

        var jsonObj = [];
        $(".inputs-group").each(function() {
            var firstname = $(this).find('input[name=frstname]').val();
            var lastname  = $(this).find('input[name=lastname]').val();
            var gender    = $(this).find('input[name=gender]').val();
            var dob       = $(this).find('input[name=dob]').val();
            var email     = $(this).find('input[name=email]').val();

            item = {}
            item ['firstname']  = firstname;
            item ['lastname']   = lastname;
            item ['gender']     = gender;
            item ['dob']        = dob;
            item ["email"]      = email;

            jsonObj.push(item);
        });
        var jsonString = JSON.stringify(jsonObj);
        console.log(jsonString);
    });
});