使用Javascript将多个表单数据收集为JSON,并通过AJAX发送到PHP

时间:2013-08-13 02:52:41

标签: php javascript ajax json

我不确定我是否错过了JSON的观点,因为从我所看到的;教程,示例和问题不涉及通过JSON / AJAX将表单数据发布到PHP。

我看到很多使用jQuery的例子,但我还没有学过jQuery,因为我被告知先了解Javascript是最好的,然后再使用jQuery作为速记。

我可以“收集”我的表单数据并处理并输出一个我认为是JSON语法的字符串。

"{p1:{'lname':'adsfer','fname':'asdf','email':'ewrt','sex':'male'},p2:{'lname':'erty','fname':'erty','email':'erty','sex':'male'}}"

HTML

<form id="p1">
<h2>Add Person 1:</h3> 
Surname: <input type='text' name='lname' value='' ><br>
First Name:<input type='text' name='fname' value='' ><br>
Email: <input type='email' name='email' value=''><br>
Sex:<select name='sex'><option></option><option value='male'>Male</option><option value='female'>Female</option></select> 
</form> 

<form id="p2">
<h2>Add Person 2:</h3> 
Surname: <input type='text' name='lname' value='' ><br>
First Name:<input type='text' name='fname' value='' ><br>
Email: <input type='email' name='email' value=''><br>
Sex:<select name='sex'><option></option><option value='male'>Male</option><option value='female'>Female</option></select> 
</form>
<button onclick='submit_forms()'>Next</button> 

的Javascript

function submit_forms(){
    var div = "content";
    var url = "contract.php";
    var forms = document.forms;
    var txt = "{";
    for(var i = 0 ;i<forms.length;i++){
        txt += forms[i].id + ':{';
        for(var n=0;n<forms[0].length;n++){
            txt += "'" + forms[i][n].name + "':'" + forms[i][n].value +"',";
        }
        txt = txt.substring(0,txt.length-1);
        txt += '},';
    }  
        txt = txt.substring(0,txt.length-1);
        txt +='}';
    txt = JSON.stringify(txt);
   alert(txt)
   post_JSON_PHP(txt,div,url);
   }

function post_JSON_PHP(vars,div,url){
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById(div).innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("POST",url,true);
    xmlhttp.setRequestHeader("Content-type", "application/JSON");
    xmlhttp.send(vars);
}

PHP

$json = json_decode($_POST['p1']);
var_dump($json);

PHP回复 注意:未定义索引:p1表示行 和 NULL。

只是我的语法有些错误,或者我完全走错了路?

4 个答案:

答案 0 :(得分:0)

我不知道当内容类型设置为JSON时它不会给PHP页面POST数据,因此无法使用$ _POST检索它。

在我从javascript

中删除stringify函数后,使用此PHP代码为我工作
$json = json_decode(file_get_contents('php://input'),true);
echo $json['p1']['fname'];

答案 1 :(得分:0)

如果它对其他人有帮助,我上面的代码就构建了JSON文本字符串,但我发现它有局限性。

相反,我构建了一个JavaScript对象,然后使用JSON.stringify函数将该对象转换为JSON。

即使我修改了表单,这个脚本也可以工作,它处理同名表格的ARRAY。

经过无休止的研究,我发现有一个jQuery函数可以做同样的事情加上更多,也可能更优雅。但是,如果你像我一样,还没有学过jQuery;你可能会发现这个有用的

function submit_forms(){
    var div = "content";    //for AJAX call
    var url = "process.php";    //for AJAX call
    var form = document.forms;
    var ppl = {};
    for(var i = 0;i<form.length;i++){
        if (ppl[form[i].name]){
            ppl[form[i].name].push({});
        } else {
            ppl[form[i].name] = [{}];
        }
        var index = ppl[form[i].name].length-1;
        for (var n=0;n<form[i].length;n++){
            ppl[form[i].name][index][form[i][n].name] = form[i][n].value;
        }
    }
    console.log(ppl);
    var vars = JSON.stringify(ppl);
    ajax_json(vars,div,url)

} 

答案 2 :(得分:-1)

JSON键和值必须用双引号括起来:

'{ "key": "value1", "key2": "value2", "object": { "prop": "value" } }'
"{ \"key\": \"value1\", \"key2\": \"value2\", \"object\": { \"prop\": \"value\" } }"

在PHP上成功解码后,您应该将其用作对象,而不是数组:

$class = json_decode('{ "key": "value", "sclass": { "name": "abc", "surname": "xyz" } }');
echo $class->key; // = value
echo $class->sclass; // Error: cannot convert std class to string
echo $class->sclass->name; // = abc

答案 3 :(得分:-1)

据我所知,您正在尝试在请求正文中发送行数据,因此服务器无法识别您正在发送表单数据,这就是您的$ _POST数组为空的原因。

Check out this link

您应该将标题内容类型作为application / x-www-form-urlencoded发送,并将您的表单数据序列化为json字符串,而不是urlencoded。

xmlhttp.open("POST","ajax_test.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

在这种情况下,您的数据将作为表单数据在您的php脚本中提供。