zoukankan      html  css  js  c++  java
  • 取得页面上存储的json格式数据

        <div class="ch">
            <input type="text" class="in" value="{"a":"1,2,3"}">
            <input type="text" class="in" value="{"b":"2,3,4"}">
            <input type="button" class="btn" value="转换">
        </div>

    现在想把input框内的对象数据取出来,怎么办呢?

    我们可以先取出来字符串,再通过JSON.parse方法来处理:

    $('.btn').on('click', function(){
            var args = {};
            $('.ch').find('.in').each(function(index, ele){
                var _args = $(ele).val()
                _args = JSON.parse(_args)
                for(var key in _args){
                    var value = args[key] ? args[key] + ',' : ''
                    args[key] = value + _args[key]
                }
            });
            console.log(args)
        })

    我们可以得到想要的结果:

    {a: "1,2,3", b: "2,3,4"}

     那么如果input框内不是标准的json格式呢?比如这样:

        <div class="ch">
            <input type="text" class="in" value="{'a':'1,2,3'}">
            <input type="text" class="in" value="{'b':'2,3,4'}">
            <input type="button" class="btn" value="转换">
        </div>

    再使用JSON的parse是会报错的。

    VM729:1 Uncaught SyntaxError: Unexpected token ' in JSON at position 1
    at JSON.parse (<anonymous>)
    at HTMLInputElement.<anonymous> (foreach.html:40)
    at Function.each (jquery-1.11.0.js:384)
    at jQuery.fn.init.each (jquery-1.11.0.js:137)
    at HTMLInputElement.<anonymous> (foreach.html:37)
    at HTMLInputElement.dispatch (jquery-1.11.0.js:4624)
    at HTMLInputElement.elemData.handle (jquery-1.11.0.js:4292)

     怎么办呢?

    $('.btn').on('click', function(){
            var args = {};
            $('.ch').find('.in').each(function(index, ele){
                var _args = new Function('return ' + $(this).val())()
    
                for(var key in _args){
                    var value = args[key] ? args[key] + ',' : ''
                    args[key] = value + _args[key]
                }
            });
            console.log(args)
        })

    结果同上面是一样的。

  • 相关阅读:
    C++中类模板的概念和意义
    欢迎访问新博客aiyoupass.com
    P2327
    P2885
    P1968
    Link-Cut-Tree
    树的重心
    点分治笔记
    SPOJ 375
    树链剖分
  • 原文地址:https://www.cnblogs.com/mantishell/p/12098331.html
Copyright © 2011-2022 走看看