Question

我有一个HTML表单，并使用序列化jQuery代码段将表单数据转换为JSON表示，如下所述：Convert form data to JavaScript object with jQuery

我只能在div标签中显示JSON输出。但是我希望在单击表单提交按钮时在新文件或窗口中显示输出。

标题中的我的jQuery序列化代码段

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};
$(function() {
    $('form').submit(function() {
        $('#result').text(JSON.stringify($('form').serializeObject(), null, 4));
        return false;
    });
})

我的HTML

<form id="student" method="post">
<label>Name: </label><input type="text" name="studentname" /><br />
<label>Age: </label><input type="text" name="age" /><br />
<label>City: </label><input type="text" name="city" />
<input type="submit" value="Submit" id="submitbutton" /><br />
</form>

<pre id="result"></pre>

Answer 1

将结果放在一个新窗口中很简单 - 只需将提交部分更改为以下内容：

$(function() {
    $('form').submit(function() {
        var txt = JSON.stringify($('form').serializeObject());
        $('#result').text(txt, null, 4);
        var recipe =  window.open('','ResultWindow','width=600,height=600');
        var html = '<html><head><title>Result Window</title></head><body><div>' + txt + '</div></body></html>';
    recipe.document.open();
    recipe.document.write(html);
    recipe.document.close();
        return false;
    });
})

结帐http://jsfiddle.net/u6z4X/

如何在新文件或窗口中输出表单数据的JSON表示？

1 个答案: