Currently my AJAX is working like this:

目前我的AJAX是这样工作的:

index.php

index . php

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

one.php

one.php

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

ajax.js

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

Above code is working perfectly. When I click link 'One' then one.php is executed and String "One" is loaded into workspace DIV.

以上代码运行良好。当我点击链接' 1 '然后1。执行php并将“1”字符串加载到workspace DIV中。

Question:

Now I want to submit a form with AJAX. For example I have a form in index.php like this.

现在我想用AJAX提交一个表单。例如，我在索引中有一个表单。php这样的。

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

When I submit the form then one.php should print the textbox value in workspace DIV.

当我提交表格时。php应该在workspace DIV中打印文本框值。

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

How to code js to submit the form with AJAX/JSON.

如何用AJAX/JSON编码js提交表单。

Thanks

谢谢

4 个解决方案

#1

Submitting the form is easy:

提交表格很容易:

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

However that will post back the entire page.

但是，这将返回整个页面。

A post via an Ajax call is easy too:

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

If you then want to do something with the result you have two options - you can either explicitly set the success function (which I've done above) or you can use the load helper method:

如果你想对结果做点什么，你有两个选择——你可以显式地设置成功函数(我在上面已经做过)或者你可以使用load helper方法:

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

Unfortunately there's one messy bit that you're stuck with: populating that data object with the form variables to post.

不幸的是，有一件棘手的事情需要您去解决:用表单变量填充那个数据对象。

However it should be a fairly simple loop.

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

#2

Here is my complete solution:

以下是我的完整解决方案:

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

#3

Have a look at the $.ajaxSubmit function in the jQuery Form Plugin. Should be as simple as

看看这美元。jQuery表单插件中的ajaxSubmit函数。应该像这样简单吗?

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

You may also want to bind to the form submit event so that all submissions go via AJAX, as the example on the linked page shows.

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

#4

You can submit the form with jQuery's $.ajax method like this:

您可以使用jQuery的$提交表单。ajax方法是这样的:

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

#1