表单提交没有页面刷新

时间:2010-09-23 09:17:26

标签: php jquery ajax forms

有人可以向我展示使用 jquery显示成功提交表单 而不刷新页面的教程。当邮件发送时,gmail会发生类似的情况,黄色叠加显示邮件已发送然后淡出。 我希望根据表单提交的结果显示消息。

2 个答案:

答案 0 :(得分:5)

好的...这样的事情......但我没有尝试过......所以就像教程一样使用它..你也可以使用json

JS:

function processForm() { 
        $.ajax( {
            type: 'POST',
            url: form_process.php,
            data: 'user_name=' + encodeURIComponent(document.getElementById('user_name').value),
            success: function(data) {
                $('#message').html(data);
            }
        } );
}

HTML:

<form action="" method="post" onsubmit="processForm();return false;">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>
<div id='message'></div>

form_process.php

$user_name = $_POST['user_name'];
if(do something){
     echo "login success";
else{
     echo "login unsuccessful";
}

答案 1 :(得分:0)

贾特的回答几乎是正确的。但是别忘了将url属性设置为'' 这可能会为您节省几分钟的调试时间