利用js将 json对象在textarea中赋值与展示

明明很简单的东西，可惜网上一大堆废话。在此记录，转需。

 jsonStr = JSON.stringify(jsondata,null,4);

 

example:

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]>
<html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>
<html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>
<html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">

    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
         Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>flow CURD测试</title>

    <!-- Mobile viewport optimized: j.mp/bplateviewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- CSS: implied media="all" -->
    <load href="/api/Application/Habo_v2/View/Index/style.css"/>
    <load href="__PUBLIC__/css/bootstrap.min.css" />
    <load href="__PUBLIC__/js/jquery.js" />
    <load href="__PUBLIC__/js/bootstrap.min.js" />


    <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->

</head>

<body class="home">

<div class="container">
    <header>
        <h3>flow CURD 接口测试</h3>

    </header>

    <form>
        <div class="form-group">
            <label for="flowid">FlowId:</label>
            <input id="flowid" type="text" class="form-control" placeholder="input flowid here">
        </div>
        <div class="form-group">
            <label for="flowdata">Example jsondata</label>
            <textarea id="flowdata" class="form-control bg-muted code" rows="18" placeholder="Input flow json data here"></textarea>
        </div>
        <div class="form-group row">
            <button id="createflow" type="button" class="btn btn-primary col-md-2 col-md-offset-2">新建</button>
            <button id="updateflow" type="button" class="btn btn-primary col-md-2">修改</button>
            <button id="searchflow" type="button" class="btn btn-primary col-md-2">查找</button>
            <button id="deleteflow" type="button" class="btn btn-primary col-md-2">删除</button>
        </div>
    </form>

    <div class="clear"></div>
</div>

<footer>
    <div id="footer">
        Copyright &copy;
        <script type="text/javascript">
            d = new Date();
            document.write(d.getFullYear());
        </script>
        <span>Habo, Inc. All rights reserved.</span><br/>
        Generated by <a href="http://Habo.oa.com">Habo</a>.
    </div>
</footer>
</div> <!--! end of #container -->

<script>
    $(function(){
        $("#searchflow").click(function(){
            var flow_id = $("#flowid").val();
            var param = {
                'flow_id' : flow_id
            };
            console.log("flowID",flow_id);
            $.getJSON("/api/index.php/Habo_v2/DiyApi/getFlowData",data=param, function(jsondata){
                jsonStr = JSON.stringify(jsondata,null,4);
                $("#flowdata").val(jsonStr);
                console.log("flowData: ",jsondata);
            });
        });
    })
</script>

</body>
</html>

 

posted on 2016-08-09 20:04  星空守望者--jkmiao  阅读(3271)  评论(0)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2024 星空守望者--jkmiao
Powered by .NET 9.0 on Kubernetes