Question

我正在尝试从包含表单值的字符串返回有效的JSON对象，但是，使用JavaScript JSON.parse返回char值数组而不是JSON对象。以下是我的代码：

<!DOCTYPE html>
<html>
    <head>
    <title>Select Browser Options</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src='https://code.jquery.com/jquery-2.0.3.js'></script>
    </head>
    <body style="width: 640px;height: 480px;">
    <div id="hiddenX" style="display:none;"></div>
    <div id="hiddenY" style="display:none;"></div>
    <div id="searchPrefs">
        <form id="searchPreferences">
        <div id="searchWrapper">
            <input class="id" type="text" name="id" value="googleSearch">
            <input class="label" type="text" name="label" value="Google Search">
            <input class="iconURL" type="text" name="iconURL" value="https://www.google.com/favicon.ico">
            <input class="tabURL" type="text" name="tabURL" value="https://www.google.com/search?q=">
            <br></br>
            <input class="id" type="text" name="id" value="googleMapSearch">
            <input class="label" type="text" name="label" value="Google Maps">
            <input class="iconURL" type="text" name="iconURL" value="https://maps.gstatic.com/favicon3.ico">
            <input class="tabURL" type="text" name="tabURL" value="https://www.google.com/maps/preview/search/">
            <br></br>
            <input class="id" type="text" name="id" value="ddgSearch">
            <input class="label" type="text" name="label" value="Duck Duck Go Search">
            <input class="iconURL" type="text" name="iconURL" value="https://duckduckgo.com/favicon.ico">
            <input class="tabURL" type="text" name="tabURL" value="https://duckduckgo.com/?q=">
            <br></br>
            <input class="id" type="text" name="id" value="imageSearch">
            <input class="label" type="text" name="label" value="Google Image Search">
            <input class="iconURL" type="text" name="iconURL" value="data:image/gif;base64,R0lGODlh…GbsuF0PHJq9WipnYJB9/UmFyIAOw==">
            <input class="tabURL" type="text" name="tabURL" value="https://www.google.com/search?tbm=isch&q=">
            <br></br>
            <input class="id" type="text" name="id" value="bingSearch">
            <input class="label" type="text" name="label" value="Bing Search">
            <input class="iconURL" type="text" name="iconURL" value="http://bing.com/favicon.ico">
            <input class="tabURL" type="text" name="tabURL" value="http://www.bing.com/search?q=">
            <br></br>
            <input class="id" type="text" name="id" value="thesaurusSearch">
            <input class="label" type="text" name="label" value="Thesaurus Search">
            <input class="iconURL" type="text" name="iconURL" value="http://static.sfdict.com/thescloud/favicon.ico">
            <input class="tabURL" type="text" name="tabURL" value="http://thesaurus.com/browse/">
            <br></br>
            <input class="id" type="text" name="id" value="wikipediaSearch">
            <input class="label" type="text" name="label" value="Wikipedia Search">
            <input class="iconURL" type="text" name="iconURL" value="https://bits.wikimedia.org/favicon/wikipedia.ico">
            <input class="tabURL" type="text" name="tabURL" value="https://en.wikipedia.org/w/index.php?search=">
            <br></br>
            <input class="id" type="text" name="id" value="wiktionarySearch">
            <input class="label" type="text" name="label" value="Wiktionary Search">
            <input class="iconURL" type="text" name="iconURL" value="https://bits.wikimedia.org/favicon/wiktionary/en.ico">
            <input class="tabURL" type="text" name="tabURL" value="https://en.wiktionary.org/w/index.php?search=">
            <br></br>
        </div>
        <a id="more" href="#"></a>
        <br></br>
        <input id="save" type="submit" value="save" name="save">
        </form>
        <div id="output"></div>
        <script>
        $('#searchPreferences').submit(function(event) {
            var justValues = "[";
            var formJson = $('#searchPreferences').serializeArray();
            var lastKey = $("input").length - 2;
            $.each(formJson, function(i, field) {
            if (field.name === "id") {
                justValues += '{"' + field.name + '":"' + field.value + '",';
            } else if (field.name === "tabURL" && i === lastKey) {
                justValues += '"' + field.name + '":"' + field.value + '"}';
            } else if (field.name === "tabURL") {
                justValues += '"' + field.name + '":"' + field.value + '"},';
            } else {
                justValues += '"' + field.name + '":"' + field.value + '",';
            }
            });
            justValues += "]";
            JSON.parse(justValues);
            for(var o in justValues){
            console.log(o+':'+justValues[o]);
            }
            console.log(justValues);
            event.preventDefault();
        });
        </script>
    </div>
    </body>
</html>

这是console.log输出：

...
1210:?
1211:s
1212:e
1213:a
1214:r
1215:c
1216:h
1217:=
1218:"
1219:}
1220:]
[{"id":"googleSearch","label":"Google Search","iconURL":"https://www.google.com/favicon.ico","tabURL":"https://www.google.com/search?q="},{"id":"googleMapSearch","label":"Google Maps","iconURL":"https://maps.gstatic.com/favicon3.ico","tabURL":"https://www.google.com/maps/preview/search/"},{"id":"ddgSearch","label":"Duck Duck Go Search","iconURL":"https://duckduckgo.com/favicon.ico","tabURL":"https://duckduckgo.com/?q="},{"id":"imageSearch","label":"Google Image Search","iconURL":"data:image/gif;base64,R0lGODlh…GbsuF0PHJq9WipnYJB9/UmFyIAOw==","tabURL":"https://www.google.com/search?tbm=isch&q="},{"id":"bingSearch","label":"Bing Search","iconURL":"http://bing.com/favicon.ico","tabURL":"http://www.bing.com/search?q="},{"id":"thesaurusSearch","label":"Thesaurus Search","iconURL":"http://static.sfdict.com/thescloud/favicon.ico","tabURL":"http://thesaurus.com/browse/"},{"id":"wikipediaSearch","label":"Wikipedia Search","iconURL":"https://bits.wikimedia.org/favicon/wikipedia.ico","tabURL":"https://en.wikipedia.org/w/index.php?search="},{"id":"wiktionarySearch","label":"Wiktionary Search","iconURL":"https://bits.wikimedia.org/favicon/wiktionary/en.ico","tabURL":"https://en.wiktionary.org/w/index.php?search="}]

Answer 1

看起来你没有用JSON.parse的返回值做任何事情。我想你想做的是。

justValues = JSON.parse(justValues);

这应该让它运作起来。然而，这是获得你所追求的东西的间接方式。如果您想要的是JavaScript对象，为什么不直接构建该对象？而不是构建一个JSON字符串，然后将其解析为一个对象。

将字符串转换为有效的json对象

1 个答案: