【问题标题】:store return json value in input hidden field在输入隐藏字段中存储返回 json 值
【发布时间】:2011-03-27 19:17:26
【问题描述】:

我想知道是否可以将返回的 json 存储在隐藏的输入字段中。例如,这是我的 json 返回的内容:

[{"id":"15aea3fa","firstname":"John","lastname":"Doe"}]

我只想将 id 存储在隐藏字段中,以便稍后引用它来处理它。

示例:我有这样的事情:

<input id="HiddenForId" type="hidden" value="" />

并希望 jquery 稍后将值返回给我,如下所示:

var scheduletimeid = $('#HiddenForId').val();

【问题讨论】:

标签: javascript jquery json


【解决方案1】:

虽然我已经看到建议的方法使用和工作,但我认为仅使用 JSON.stringify 设置隐藏字段的值会破坏 HTML...

在这里我将解释我的意思:

<input type="hidden" value="{"name":"John"}">

如您所见,开链括号后的第一个双引号可能会被某些浏览器解释为:

<input type="hidden" value="{" rubbish >

因此,为了更好地解决此问题,我建议使用 encodeURIComponent 函数。与 JSON.stringify 一起,我们应该拥有如下内容:

> encodeURIComponent(JSON.stringify({"name":"John"}))
> "%7B%22name%22%3A%22John%22%7D"

现在该值可以安全地存储在输入隐藏类型中,如下所示:

<input type="hidden" value="%7B%22name%22%3A%22John%22%7D">

或者(甚至更好)使用由脚本操作的 HTML 元素的 data- 属性,该脚本将使用数据,如下所示:

<div id="something" data-json="%7B%22name%22%3A%22John%22%7D"></div>

现在要读回数据,我们可以执行以下操作:

> var data = JSON.parse(decodeURIComponent(div.getAttribute("data-json")))
> console.log(data)
> Object {name: "John"}

【讨论】:

  • 如果您需要以 POST 形式返回复杂对象,这是唯一可以使用的方法。它应该是公认的答案(因为大多数搜索和发现此问题的人都希望这样做)。
  • 迄今为止最好的解决方案,这应该是公认的答案。
  • 哇最好的解决方案我有 JSON.stringify 2 小时的问题,然后我发现了这个令人震惊的答案。谢谢。
  • 在使用 input 元素时为我工作,但在使用 div 时却不行。很好的解决方案。
  • 我使用了 JSON.stringify() 但该值没有出现在输入元素上。但我现在可以使用这个了,很棒的解决方案。
【解决方案2】:

您可以使用input.value = JSON.stringify(obj) 将对象转换为字符串。
当您需要它时,您可以使用obj = JSON.parse(input.value)

JSON 对象在现代浏览器上可用,或者您可以使用来自json.org 的 json2.js 库

【讨论】:

    【解决方案3】:

    您可以将其存储在隐藏字段中,或者将其存储在 javascript 对象中(我的偏好),因为可能通过 javascript 进行访问。

    注意:由于您有一个数组,因此将作为myvariable[0] 访问第一个元素(正如您所拥有的那样)。

    编辑显示示例:

    clip...
                success: function(msg)
                {
                    LoadProviders(msg);
                },
    ...
    
    var myvariable ="";
    
    function LoadProviders(jdata)
    {
      myvariable = jdata;
    };
    alert(myvariable[0].id);// shows "15aea3fa" in the alert
    

    编辑:创建此页面:http://jsfiddle.net/GNyQn/ 来演示上述内容。此示例假设您已经在数组中正确返回了命名字符串值,并且只需将其存储在每个 OP 问题中。在示例中,我还将返回的第一个数组的值(每个 OP 示例)作为文本放入 div。

    我不确定为什么这被视为“复杂”,因为我认为没有更简单的方法可以处理此数组中的这些字符串。

    【讨论】:

    • 奇怪没有 cmets 反对可行的解决方案。显然,您也可以将值放在隐藏字段中,例如 $(myfieldselector).val(myvalue);也是。这两个我都注意到了。数组是我选择 Javascript 对象的原因。
    • JS 是前端,JSP 是服务器。如果您只想设置 json 服务器端,因为它们在前端无法访问怎么办?那么如何将 JSON 存储在隐藏字段中呢?
    • @user2696258 - 另一个问题,请将其作为一个新问题发布,如果您发现它可能对您的新问题有所帮助,请参考这个问题以及您尝试过的代码。
    【解决方案4】:

    如果您使用JSON Serializer,您可以简单地以字符串格式存储您的对象

    myHiddenText.value = JSON.stringify( myObject );
    

    然后您可以使用返回值

    myObject = JSON.parse( myHiddenText.value );
    

    但是,如果您不打算在页面提交中传递此值,那么它可能对您来说更容易,并且如果您将其作为全局 javascript 变量隐藏起来,您将节省大量的序列化时间。

    【讨论】:

      【解决方案5】:

      看起来返回值在一个数组中?这有点奇怪......并且还要注意某些浏览器将允许从跨域请求中解析它(当您拥有顶级 JSON 对象时,这是不正确的)。

      无论如何,如果这是一个数组包装器,你会想要这样的:

      $('#my-hidden-field').val(theObject[0].id);
      

      您可以稍后通过对同一字段的简单 .val() 调用来检索它。不过,老实说,这看起来有点奇怪。隐藏字段不会在页面请求中持续存在,那么为什么不将其保存在您自己的(伪命名空间)值存储桶中呢?例如,

      $MyNamespace = $MyNamespace || {};
      $MyNamespace.myKey = theObject;
      

      这将使您可以在任何地方使用它,而无需任何麻烦的输入字段管理。它也比为简单的值存储进行 DOM 修改效率更高。

      【讨论】:

      • 这种方法即使在异步请求之后也能工作并且可以从动态生成的元素中访问吗?例如LoadRemoteDataFunction(...).then(save to pseudobucket) ---> DynamicallyGenerateFormPugin(访问异步获取的数据);
      【解决方案6】:

      只需使用 javascript 设置隐藏字段:

      document.getElementById('elementId').value = 'whatever';
      

      还是我错过了什么?

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-03-09
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多