如何使用AJAX / JSON提交表单？ [英] How to submit a form with AJAX/JSON?

问题描述

目前我的AJAX正在如下工作：

index.php

 < a href ='one.php'class ='ajax'> One< / a> 
< div id =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'，然后执行 one.php ，并将String One加载到工作区DIV 。

问题：

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

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

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

  $ arr = array（workspace=&$; _POST ['myText']）; 
 echo json_encode（$ arr）; 
  

如何使用AJAX / JSON来提交表单。

感谢

解决方案

提交表单非常简单：

  $ j（'＃myForm'）。submit（）; 
  

然而，这会将整个页面回传。

通过Ajax调用的帖子也很简单：

  $ j.ajax（{
 type：' POST'，
 url：'one.php'，
 data：{
 myText：$ j（'＃myText'）。val（），
 myButton：$ j（ '#myButton'）。val（）
}，
成功：function（response，textStatus，XMLHttpRequest）{
 $ j（'div.ajax'）。html（response）; 
} 
}）; 
  

如果您然后想要对结果进行操作，您有两个选项 - 您可以显式设置 success 函数（我已经在上面完成了），或者您可以使用 load helper方法：

  $ j（'div.ajax'）。load（'one.php'，data）; 
  

不幸的是，您遇到了一个棘手的问题：填充数据具有要发布的表单变量的对象。

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

Currently my AJAX is working like this:

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

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

Question:

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

<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.

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

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

Thanks

解决方案

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:

$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:

$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.

这篇关于如何使用AJAX / JSON提交表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！