目前,我有以下代码:

home.php

<form name='myformname' id='myformid'>
    <input type='text' name='mytext1' value='abc'>
    <input type='text' name='mytext2' value='123'>
    <input type='submit' value='Submit'> 
</form>

<div id='textone'></div><div id='texttwo'></div>

_home.php

$arr = array( 'textone' => $_POST['mytext1'], 'texttwo' => $_POST['mytext2'] );
echo json_encode( $arr );

ajax.js

jQuery('#myformid').live('submit',function(event) {
    $.ajax({
        url: '_home.php',
        type: 'POST',
        data: $('#myformid').serialize(),
        success: function( data ) {
            // TODO: write code here to get json data and load DIVs instead of alert
            alert(data);
        }
    });
    return false;
});

提交输出:

{"textone":"abc","texttwo":"123"}

问题

我想加载 mytext1 价值 textone div和 mytext2 价值 textwo 使用_home.php中的JSON数据DIV

暗示: 我在用 这个答案 在链接点击事件上执行相同的任务。但是如何在表单提交中做到这一点呢?

谢谢

有帮助吗?

解决方案

您只想解析JSON并将Divs设置为其包含的值正确吗?

var divs = JSON.parse(data);
for (var div in divs) {
  document.getElementById(div).innerHTML = divs[div];
}

(以前的海报的语法可能更像您追求的内容,也许是跨浏览器兼容,但不包括JSON解析。)

由于JSON只是JavaScript的一个子集,因此您只需评估()。 JSON.PARSE()基本上是这样做的,但是可以保证,如果“数据”包含一些令人讨厌的代码而不是简单的对象,则不会对其进行评估。

其他提示

在成功函数中

for (prop in data){
    $('#' + prop).html(data[prop]);
}

这是我完整的JS解决方案:

jQuery('#myformid').live('submit',function(event) {
    $.ajax({
        url: '_home.php',
        type: 'POST',
        dataType: 'json',
        data: $('#myformid').serialize(),
        success: function( data ) {
            for(var id in data) {
                //jQuery('#' + id).html(data[id]); // This will also work
                document.getElementById(id).innerHTML = data[id];
            }
        }
    });
    return false;
});
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top