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

How to submit a form with AJAX/JSON?

提问by Naveed

Currently my AJAX is working like this:

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

index.php

索引.php

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

one.php

一个.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.phpis executed and String "One"is loaded into workspace DIV.

上面的代码运行良好。当我点击链接“一”则one.php执行和字符串“一”被加载到工作区DIV。

Question:

题：

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

现在我想用 AJAX 提交一个表单。例如，我在index.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.phpshould print the textbox value in workspace DIV.

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

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

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

如何编写 js 代码以使用 AJAX/JSON 提交表单。

Thanks

谢谢

回答by Keith

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 successfunction (which I've done above) or you can use the loadhelper method:

如果你想对结果做一些事情，你有两个选择 - 你可以显式设置success函数（我在上面已经完成了）或者你可以使用load辅助方法：

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

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

不幸的是，您遇到了一个混乱的问题：data用要发布的表单变量填充该对象。

However it should be a fairly simple loop.

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

回答by Naveed

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

回答by EMP

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

查看jQuery Form Plugin中的$.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 进行，如链接页面上的示例所示。

回答by Sarfraz

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

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

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