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

我知道这似乎是我应该马上找到一个简单解释这个概念的例子，而我找不到合适的例子。在那里的教程中的例子使用flickr作为请求url，并且我将它指向一个点。我试图在一个更大的信息桶下处理一个具有四个不同信息桶的非常复杂的表单。我虽然json会是一个不错的选择。所以我找到了一个例子，告诉我如何序列化这样的数据：如何使用json将此表单提交到另一个页面并在PHP或jQuery中解析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方法，当它弹出它看起来不错的警报，然后进入下一个页面。只有那个我写出来的隐藏的变种不存在。其余的表单值是。我只是想以某种方式看到darn 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页沟通？感谢您提出这样一个新手问题。我搜索了一段时间，但无法弄清楚我是否需要使用框架，或者是否有一个非常直接的方法......有很多不同的例子比这个问题似乎更复杂对于。

来源

2010-11-11 Lynn

尝试把隐藏输入那里开始

<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;

来源

2010-11-11 20:53:08 Dutchie432

我会建议使用$（ '＃jsonval' 的jQuery的参考）通过getElementById，因为jQuery在跨浏览器兼容方面做得很好。但除此之外，我同意预先创建输入字段并在稍后填充。 – 2010-11-11 21:01:04

注意。我个人并不是jQuery向导......还在学习语法等......但这个想法依然存在。 – Dutchie432 2010-11-11 21:18:48

工作正常！很高兴我问了这个问题。感谢您的帮助！ – Lynn 2010-11-11 21:29:44

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

回答

相关问题