如何使用AJAX/JSON提交表单？

Question

目前我的AJAX工作方式如下:

的index.php

<a href='one.php' class='ajax'>One</a>    
<div id="workspace">workspace</div>

one.php

$arr = array ( "workspace" => "One" );
echo json_encode( $arr );

ajax.js

jQuery(document).ready(function(){
    jQuery('.ajax').live('click', function(event) {
        event.preventDefault();
        jQuery.getJSON(this.href, function(snippets) {
            for(var id in snippets) {
                jQuery('#' + id).html(snippets[id]);
            }
        });
    });
});

上面的代码工作得很好.当我点击链接"一"则one.php执行和字符串"一"被加载到工作区DIV.

题:

现在我想用AJAX提交一个表单.例如,我在index.php中有一个像这样的表单.

<form id='myForm' action='one.php' method='post'>
 <input type='text' name='myText'>
 <input type='submit' name='myButton' value='Submit'>
</form>

当我提交表单时,one.php应该在工作区DIV中打印文本框值.

$arr = array ( "workspace" => $_POST['myText'] );
echo json_encode( $arr );

如何编写js以使用AJAX/JSON提交表单.

谢谢

Answer 1

提交表格很简单:

$j('#myForm').submit();

但是,这将回发整个页面.

通过Ajax调用的帖子也很容易:

$j.ajax({
    type: 'POST',
    url: 'one.php',
    data: { 
        myText: $j('#myText').val(), 
        myButton: $j('#myButton').val()
    },
    success: function(response, textStatus, XMLHttpRequest) {  
        $j('div.ajax').html(response);
    }
});

如果你想对结果做一些事情你有两个选择 - 你可以显式设置success函数(我在上面做过)或者你可以使用load辅助方法:

$j('div.ajax').load('one.php', data);

不幸的是,你有一个混乱的位置:data用表单变量填充该对象以发布.

但它应该是一个相当简单的循环.

Answer 2

这是我的完整解决方案:

jQuery('#myForm').live('submit',function(event) {
    $.ajax({
        url: 'one.php',
        type: 'POST',
        dataType: 'json',
        data: $('#myForm').serialize(),
        success: function( data ) {
            for(var id in data) {
                jQuery('#' + id).html(data[id]);
            }
        }
    });
    return false;
});