使div淡入表单提交

Question

我需要做的是使用Ajax提交表单，将表单内容作为发布数据发布到同一页面，并在完成时淡入div。

我遇到的问题是：

1. 通过ajax提交表单而无需刷新
2. 将表单的内容发布到同一页面
3. 提交表格后淡入我的div

我目前拥有的代码是：

<script src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script>
$("submits").click(function() { 
    $('form').bind('submit', function () {
      $.ajax({
        type: 'post',
        url: 'index.php',
        data: $('form').serialize(),
        success: function () {
            alert('Success');
        }
    });
    $(".element")
        .css({ opacity:0, visibility:"visible" })
        .animate({ opacity:1 }, "slow");
});
</script>

<?php
If(!Empty($_POST)){
?>
<div class="availability" id="availability">
<?php
Include 'functions/functions.php';

$Username = $_POST['username'];

If(Class_Exists('AIM')){ // note: this is just a check since i move my files a lot
    AIM::Execute($Username); 
}
?>
</div>

在不尝试捕获表单提交的情况下，一切都按预期工作。

如果您需要提供任何其他代码来提供帮助，只需注释一下，非常感谢您的帮助，谢谢。

Answer 1

ajax是否提交并成功消失：

$.ajax({
    url: window.location.href,
    type: "post",
    data: values,
    success: function(){
        $('#my_form_wrapper').fadeOut(1000); // fade out your form/wrapper 1sec
    },
    error:function(){
        alert("failure");
        $("#result").html('There is error while submit');
    }
});

Answer 2

1. 首先，这段代码很凌乱，将其组织起来，尝试将所有可能的内容放在文件顶部。

2. 您需要具有一个表单以通过AJAX中的POST提交数据。

3. 有您所需代码的完整示例：

    //Put your PHP at the top Include 'functions/functions.php'; $Username = $_POST['username']; If(Class_Exists('AIM')){ // note: this is just a check since i move my files a lot AIM::Execute($Username); } //Check if is a POST at the top of your file as well, with a variable $isPost = true; If(!Empty($_POST)) { $isPost = false; } ?> <script src='http://code.jquery.com/jquery-1.8.2.js'></script> //This is your ajax script function submitFormViaAJAX() { //this fadeOut your div, but you can change to another code to accomplish your effect $("#availability").hide(900); //set your form as content to POST via AJAX var data = $('#myForm').serialize(); //put your file name (current in your case) to make the request $.post('myFile.php', data); } </script> <?php //This "if" is not necessary, since the post will be via ajax.. if(!$isPost){ ?> <div class="availability" id="availability"> <form id="myForm"> <!--form content there--> <a href="javascript:submitFormViaAJAX();">Send Form via AJAX</a> </form> </div> <?php } ?> 

随时更改名称和一些代码行