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

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

php json

如何使用json将此表单提交到另一个页面并在PHP或jQuery中解析json？,php,json,Php,Json,我知道这似乎是我应该立即找到一个简单解释这个概念的例子，但我找不到正确的例子。教程中的示例使用flickr作为请求url，我在一定程度上理解了这一点。我试图处理一个非常复杂的表单，在一个更大的信息桶下有四个不同的信息桶。我认为json是一个不错的选择。因此，我找到了一个示例，它向我展示了如何像这样序列化数据： $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray();

我知道这似乎是我应该立即找到一个简单解释这个概念的例子，但我找不到正确的例子。教程中的示例使用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;
});

$（'form'）。提交（函数（）{
变量字段=“”；
//警报（$.toJSON（$（'form'）.serializeObject（））；
警报（现场）；
文件写入（字段）；
返回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>


与会者


名字：

姓氏：

会前：

答：

B:

几天：

会议：


会议：


会议：






选择角色：

决策者
人
家庭



选择您的教育学分：

护理部
焊接
个案经理


名字：

姓氏：

会前：

答：

B:

几天：

会议：


会议：


会议：






选择角色：

决策者
人
家庭



选择您的教育学分：

护理部
焊接
个案经理

$.fn.serializeObject=函数（）
{
var o={}；
var a=this.serializeArray（）；
$.each（a，function（）{
if（o[this.name]）{
如果（！o[this.name].push）{
o[this.name]=[o[this.name]]；
}
o[this.name].push（this.value | |“”）；
}否则{
o[this.name]=this.value | |“”；
}
});
返回o；
};
$（'form'）。提交（函数（）{
变量字段=“”；
//警报（$.toJSON（$（'form'）.serializeObject（））；
警报（现场）；
文件写入（字段）；
返回true；
});

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

试着从隐藏的输入开始

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

我建议在getElementById上使用jQuery引用$（'#jsonval'），因为jQuery在跨浏览器兼容方面做得很好。但除此之外，我同意先创建输入字段，然后再填充。我个人不是jQuery向导。。还在学语法之类的。。。但是这个想法仍然存在，这很有效！很高兴我问了这个问题。谢谢你在这件事上的帮助！

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

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

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