无需刷新页面即可提交数据,并在表单下方显示数据

时间:2012-07-25 09:18:20

标签: php jquery ajax

有人知道如何在表单下方提交后显示数据吗? 我有一个像下面的代码保存数据的功能,但我想保存数据后,它将显示在下面的表单。我觉得像facebook贴墙一样。

<script type="text/javascript" >
$(function() {
   $(".submit").click(function() {
        var name = $("#name").val();
        var username = $("#username").val();
        var password = $("#password").val();
        var gender = $("#gender").val();
        var dataString = 'name='+ name + '&username=' + username + '&password=' + password + '&gender=' + gender;

        if(name=='' || username=='' || password=='' || gender=='')
        {
            $('.success').fadeOut(200).hide();
            $('.error').fadeOut(200).show();
        }
        else
        {
           $.ajax({
               type: "POST",
               url: "result.php",
               data: dataString,
               success: function(){
                  $('.success').fadeIn(200).show();
                  $('.error').fadeOut(200).hide();
               }
            });
         }
return false;
});


});
    </script>

1 个答案:

答案 0 :(得分:0)

在您的ajax请求成功后,只需将您的回复附加到指定的HTML元素(div,span等)。

    $.ajax({
           type: "POST",
           url: "result.php",
           data: dataString,
           success: function(response){

              $('.success').fadeIn(200).show();
              $('#response').append(response);
              $('.error').fadeOut(200).hide();
           }
        });

响应将附加到指定的HTML元素。