Ajax提交不起作用

Question

$(document).ready(function(){
  $("#form1").submit(function (e){
        alert ('working 01');
            e.preventDefault();
            var $form = $(this);
        alert ('working 02');
         $.ajax({
                type: 'POST',
                url : '../portal.php',
                data: $('#form1').serialize(),
                success: function(response) {
                $('#form1').fadeOut("slow");
                alert ('working 03');
                }

                })
  });
  return false;
});

我在几个地方都回过头来看看问题出在哪里。 仅显示“正在工作的02，并且什么也没有发生。portal.php准备好接受数据。这是我的表格。

 <form id="form1" method="post">
          <label class="label_title"> e-mail </label>
          <input type="text" id="email" required>

          <label class="label_title">Comments:</label>
          <textarea cols="50" rows="10" name="com" id="com" class="textarea required" required ></textarea>
          <input type="submit" class="button" value="Send">
          </form>

Answer 1

您不能使用Submit和Ajax，最好使用click：

$(document).ready(function(){
  $(".button").click(function (e){
        alert ('working 01');
            e.preventDefault();
            var $form = $(this);
        alert ('working 02');
         $.ajax({
                type: 'POST',
                url : '../portal.php',
                data: $('#form1').serialize(),
                success: function(response) {
                $('#form1').fadeOut("slow");
                alert ('working 03');
                }

                })
  });
});

PS最好从按钮中删除type =“ submit”

更新：

$(document).ready(function(){
  $(".button").click(function (e){
        alert ('working 01');
            e.preventDefault();
            var $form = $(this);
        alert ('working 02');
         $.post('../portal.php',{data:$('#form1').serialize()},function(response){
             $('#form1').fadeOut("slow");
             alert ('working 03');
         });
  });
});

Answer 2

试试看

<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>

<form id="form1" method="post">
          <label class="label_title"> e-mail </label>
          <input type="text" id="email" required>

          <label class="label_title">Comments:</label>
          <textarea cols="50" rows="10" name="com" id="com" class="textarea required" required ></textarea>
          <input type="button" class="button" id="submit" value="Send"><!--changed-->
          </form>
          <script>
            $(document).ready(function(){
 $("#submit").click(function (e){            //changed
        alert ('working 01');
          //  e.preventDefault();
           // var $form = $(this);
        alert ('working 02');
         $.ajax({
                type: 'POST',
                url : '../portal.php',
                data: $('#form1').serialize(),
                success: function(response) {
                $('#form1').fadeOut("slow");
                alert ('working 03');
                }

                })
  });
  //return false;
});
          </script>

Answer 3

ajax是异步的 。

所以你的return false; 在ajax请求之前调用。

回报ajax的成功

$(document).ready(function(){
  $("#form1").submit(function (e){
        alert ('working 01');
            e.preventDefault();
            var $form = $(this);
        alert ('working 02');
         $.ajax({
                type: 'POST',
                url : '../portal.php',
                data: $('#form1').serialize(),
                success: function(response) {
                $('#form1').fadeOut("slow");
                alert ('working 03');
                return false;  
                }

                })
  });

});