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

我已经在几个地方回应，看看它出了什么问题。仅显示＆＃34;工作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');
                }

                })
  });
});

P.S。最好从按钮中删除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;  
                }

                })
  });

});

Ajax提交不起作用

3 个答案: