使用Jquery提交表单

时间:2010-09-21 13:00:15

标签: jquery

我正在使用类似这样的jQuery + JSON组合:

test.php的:

    

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

});

现在我想要的是,当提交一个成功的表单然后没有任何页面刷新时,应该在div testDiv下显示一条消息。我希望这个脚本会有所帮助,但是当提交表单时,页面会转到... / _ test.php并显示以下内容 -

{"testDiv":"Form is successfully submitted."}

请帮助。谢谢你的推荐

4 个答案:

答案 0 :(得分:0)

这只是我还是这个脚本适合其他人?我有上面详述的三个文件,在test.php文件的头部添加了正常的doctype和jquery核心,我得到了没有任何页面重定向的成功消息。

答案 1 :(得分:0)

我想我可能已经得到了它,或者至少我有同样的症状。

您需要检查并确保在jsFile.js脚本标记之前在脚本标记中加载jquery文件。

<强> BAD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jsFile.js"></script>
    <script type="text/javascript" src="../../_api/jquery-1.4.2.js"></script>
</head>
<body>

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

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

</body>
</html>

不可

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="../../_api/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="jsFile.js"></script>
</head>
<body>

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

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

</body>
</html>

答案 2 :(得分:-1)

您的JSON字符串有点不对,您需要它返回:

{"id":"testDiv","message":"Form is successfully submitted."}

然后在回复中:

for(var id in data) {
   jQuery('#' + data.id).html( data.message );
}

答案 3 :(得分:-2)

为什么不用普通按钮来点击事件而不是提交按钮?