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

时间：2022-09-14 21:35:57

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

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

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>

相关文章