代码之家  ›  专栏  ›  技术社区  ›  Naveed

如何使用ajax/json提交表单?

  •  5
  • Naveed  · 技术社区  · 14 年前

    目前我的Ajax工作方式如下:

    索引文件

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

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

    上面的代码工作得很好。当我单击链接时 “一” 然后 On.PHP 执行并字符串 “一” 载入 工作空间DIV .

    问题:

    现在我想用Ajax提交一个表单。例如,我在 索引文件 这样地。

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

    当我提交表格时 On.PHP 应在工作区分区中打印文本框值。

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

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

    谢谢

    4 回复  |  直到 14 年前
        1
  •  8
  •   Keith    14 年前

    提交表单很容易:

    $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 具有要发布的表单变量的对象。

    不过,它应该是一个相当简单的循环。

        2
  •  8
  •   Naveed    14 年前

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

    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
  •  2
  •   EMP    14 年前

    看看 $.ajaxSubmit 功能在 jQuery Form Plugin . 应该像

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

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

        4
  •  1
  •   Sarfraz    14 年前

    您可以使用jquery提交表单 $.ajax 方法如下:

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