问题：

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

Answer 3

查看jQuery Form Plugin中的$.ajaxSubmit功能。应该像

一样简单

 $('#myForm').ajaxSubmit();

您可能还希望绑定到表单提交事件，以便所有提交都通过AJAX进行，如链接页面上的示例所示。

Answer 4

您可以使用jQuery的$.ajax方法提交表单，如下所示：

$.ajax({
 url: 'one.php',
 type: 'POST',
 data: $('#myForm').serialize(),
 success:function(data){
   alert(data);
 }
});

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

问题：

4 个答案: