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

Question

目前，我的AJAX正在这样工作：

index.php

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

一个.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”时， 将执行 one.php 并将字符串 “ One” 加载到 工作区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函数（上面已经完成）或可以使用loadhelper方法：

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

不幸的是，您有一个麻烦的地方：data使用要发布的表单变量填充该对象。

但是，这应该是一个相当简单的循环。