jQuery的表单提交 [英] jquery form submission

问题描述

有人能告诉我使用的教程的jQuery 无需刷新页面显示成功的表单提交。 类似的事情发生在当消息被传递Gmail和黄色叠加显示您的邮件递送，然后褪色出局。

Can someone show me a tutorial of using jquery to display successful form submission without refreshing the page. Something like that happens on gmail when a message is delivered and the yellow overlay that shows that you message was delivered and then fade outs.

推荐答案

使用 jQuery的 +的 JSON 组合是这样的：

Use jQuery+JSON combination something like this:

test.php的：

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jsFile.js"></script>

<form action='_test.php' method='post' class='ajaxform'>
 <input type='text' name='txt' value='Test Text'>
 <input type='submit' value='submit'>
</form>

<div id='testDiv'></div>

_test.php：

<?php
      // Code here to deal with your form submitted data.
      $arr = array( 'testDiv' => 'Form is successfully submitted.' );
      echo json_encode( $arr );
?>

jsFile.js：

jQuery(document).ready(function(){

    jQuery('.ajaxform').submit( function() {

        $.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        for(var id in data) {
                            jQuery('#' + id).html( data[id] );
                        }
                      }
        });

        return false;
    });

});

或

您可以使用的jQuery插件形式

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