0

我对json有问题。我想在 JSON 的新浏览器窗口中显示我的表单结果。（当用户填写表单中的所有字段时，按钮将启用并以指定格式显示 JSON（我做到了））。我用 JSON 翻译它，但不知道如何输出它......我正在考虑创建新的 html 页面并在第一页的按钮上执行 window.open，但是它不会从用户输入的第一页读取数据。或者我应该以某种方式将它保存在 JSON 文件中，然后从其他页面读取它？例如：

<form name="form" ng-controller="MyCtrl">
<label> <b> * Date: </b> </label> <input type="datetime-local" ng-model="date"        name="date" onkeyup="changeButtonStatus()" onchange="changeButtonStatus()" required>    </input>
<button type="submit" id="btn" class="btn" disabled="disabled">Submit</button>
</form>

我有一些带有日期字段和按钮的表单：

我可以通过 {{date | 轻松获取日期字段的 JSON json}} 在同一页面上，但我只想在新的浏览器窗口中输出它。我怎样才能做到这一点？请帮我一些提示。谢谢。

4

3 回答 3

1

如果它不是太大，您可以将信息作为数据 URL 发送到新窗口。

框架打开后将被重复使用。

这可能是一个开始，展示如何插入 JSON 数据并将其拆分为多行以进行显示。

window.open('data:application/json,'
    +JSON.stringify(location).replace(/([[{,])/g, "$1%0a"),
    'jsonFrame',
    'resizeable,top=100, left=100, height=200, width=300,status=1')

有关所有详细信息，请参阅MDN。

于 2013-05-27T19:56:00.240 回答
0

如何将您的输入数据保存到一个页面上的 cookie 中，然后在您打开一个新窗口时通过 JavaScript 获取它？我可以在 jsFiddle 中准备代码，但目前它似乎没有导入外部资源。所以我会把它贴在这里：

第 1 页：

...
<form name="form" ng-controller="MyCtrl">
    <label> <b> * Date: </b> </label> <input id="date" type="datetime-local" ng-model="date"        name="date" onkeyup="changeButtonStatus()" onchange="changeButtonStatus()" required> </input>
    <button id="btn" class="btn" >Submit</button>
</form>

<script type="text/javascript" src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
<script type="text/javascript">
    $('#btn').click( function() {

       var cookie_value = $('#inut_test').val();
       /*cookie_value  should be your json string*/
       $.cookie("json_cookie", cookie_value, { path: '/' });

       window.open("http://localhost/page2");

       return false;
    });
</script>
...

第2页：

...
<a id="see-cookie" href="#">
    click me!!!
</a>

<script type="text/javascript" src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
<script type="text/javascript">
    $('#see-cookie').live('click', function() {
        alert($.cookie('json_cookie'));
        return false;
     });
</script>
...

不要忘记{ path: '/' }为所有站点设置 cookie 属性以及将 jQuery cookie 库包含到您的页面中。

于 2013-05-27T21:49:03.510 回答
0

您应该能够从新窗口访问 window.opener 并从中解析值。以下 plunker 显示了当控制器的提交被单击时，将来自当前范围的数据存储在可访问区域中。然后，它从新窗口中将打开器中的内容解析到窗口的范围内以进行进一步处理。

http://plnkr.co/edit/OkKX5zxYVSoZ7w81WV8J?p=preview

您也会在这里注意到如何获得一种角度友好的方式来调用提交和禁用按钮直到准备好。

希望这可以帮助。

于 2013-05-27T20:45:17.907 回答