文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用json将此表单提交到另一个页面并在PHP或jQuery中解析json？

问如何使用json将此表单提交到另一个页面并在PHP或jQuery中解析json？
EN

Stack Overflow用户

提问于 2010-11-12 04:47:19

回答 1查看 1.4K关注 0票数 0

我知道这看起来像是我应该立即找到一个简单地解释这个概念的例子，但我找不到正确的例子。教程中的示例使用flickr作为请求url，我在一定程度上做到了这一点。我正在尝试处理一个非常复杂的表单，在一个更大的信息桶中包含四个不同的信息桶。我认为json会是一个很好的选择。因此，我找到了一个示例，它向我展示了如何像这样序列化数据：

    $.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

这太棒了！通过一个警告，我可以看到json结构和我的表单元素。所以我想剩下的就很简单了。在这里，我正在绞尽脑汁，因为我找不到一个简单的例子来说明如何从我的处理页面发送或请求这个序列化数据，该页面需要打印、组织和计算发送的值。

因此，我接下来要做的(我确信这是错误的，但这可能会说明我对它有多新，以及我需要从哪里开始理解它)是将序列化的数据写出到一个隐藏字段，如下所示：

$('form').submit(function() {
    var field = '<input type="hidden" name="jsonval" value="' + $.toJSON($('form').serializeObject()) + '">';
   // alert($.toJSON($('form').serializeObject()));

    alert(field);
    document.write(field);
    return true;
});

我在表单中使用GET方法，当它弹出警报时，它看起来没有问题，然后转到下一页。只有我写出的隐藏变量不在那里。其余的表单值是。我只是想以某种方式看到可恶的json，这样我就可以使用json.parse或任何我在PHP中必须使用的东西来解码它。

下面是完整的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html lang="en"> 
<head> 
    <title>Attendees</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-1.3.min.js"></script> 
</head> 
<body> 

<form action="receive.php" method="get"> 
  <p><br/> 
    First Name:<input type="text" name="Fname" maxlength="12" size="12"/> <br/> 
    Last Name:<input type="text" name="Lname" maxlength="36" size="12"/> <br/> 
    Preconference:<br/> 
    A:<input type="radio" name="gender" value="A"/><br/> 
    B:<input type="radio" name="gender" value="B"/><br/> 
    What days:<br/> 
    ConfA:
  <input type="checkbox" name="conf[]" value="ConfA"/><br/> 
    ConfB:
  <input type="checkbox" name="conf[]" value="ConfB"/><br/> 
    ConfC:
  <input type="checkbox" name="conf[]" value="ConfC"/>
  </p>
  <p><br/>
    <input name="quote" type="text" value="Enter your meal preference" size="20">
  </p>
  <p><br/> 
    Select a role:<br/> 
    <select name="education">
      <option value="decision">Decision Maker</option>
      <option value="person">Person</option>
      <option value="fcg">Family</option>
    </select>
  </p>
  <p><br/> 
    Select your educational credits:<br/> 
    <select size="3" name="edu">
      <option value="nursing">Nursing</option>
      <option value="welding">Welding</option>
      <option value="case">Case Managers</option>
    </select> 
  </p>
  <hr>
      First Name:<input type="text" name="Fname2" maxlength="12" size="12"/> <br/> 
    Last Name:<input type="text" name="Lname2" maxlength="36" size="12"/> <br/> 
    Preconference:<br/> 
    A:<input type="radio" name="gender" value="A2"/><br/> 
    B:<input type="radio" name="gender" value="B2"/><br/> 
    What days:<br/> 
    ConfA:
  <input type="checkbox" name="conf[]" value="ConfA2"/><br/> 
    ConfB:
  <input type="checkbox" name="conf[]" value="ConfB2"/><br/> 
    ConfC:
  <input type="checkbox" name="conf[]" value="ConfC2"/>
  </p>
  <p><br/>
    <input name="quote2" type="text" value="Enter your meal preference" size="20">
  </p>
  <p><br/> 
    Select a role:<br/> 
    <select name="education2">
      <option value="decision2">Decision Maker</option>
      <option value="person2">Person</option>
      <option value="fcg2">Family</option>
    </select>
  </p>
  <p><br/> 
    Select your educational credits:<br/> 
    <select size="3" name="edu2">
      <option value="nursing2">Nursing</option>
      <option value="weld2">Welding</option>
      <option value="case2">Case Managers</option>
    </select> 
  </p>


<script type="text/javascript"> 

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

$('form').submit(function() {
    var field = '<input type="hidden" name="jsonval" value="' + $.toJSON($('form').serializeObject()) + '">';
   // alert($.toJSON($('form').serializeObject()));

    alert(field);
    document.write(field);
    return true;
});

</script> 
<p><input type="submit" /></p> 
</form> 
</body> 
</html>

如何才能让它与receive.php页面以某种方式进行通信？感谢你回答了这样一个新手问题。我确实找了一段时间，但不知道我是否需要使用一个框架，或者是否有一个很好的简单的方法……有这么多不同类型的例子，比这个问题似乎需要的更复杂。

php

json

回答 1

Stack Overflow用户

回答已采纳

发布于 2010-11-12 04:53:08

一开始就试着把隐藏输入放在那里

<input type="hidden" name="jsonval" id="jsonval" value="" /> 
<!-- also make sure to end your input tags with a "/" -->

然后在你的javascript中做...

var j = $.toJSON($('form').serializeObject());

//You might need this if the quotes are making things annoying
//j = encodeURIComponent(j);

document.getElementById('jsonval').value = j;

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/4159123

复制

相似问题

问如何使用json将此表单提交到另一个页面并在PHP或jQuery中解析json？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用json将此表单提交到另一个页面并在PHP或jQuery中解析json？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用json将此表单提交到另一个页面并在PHP或jQuery中解析json？
EN