Ajax submit 沒有提交任何東西

Question

看了這篇文章，但恐怕沒有幫助我，此刻我按下提交，頁面刷新，但我的 ajax 電話實際上沒有提交任何內容……你們能看到任何錯誤嗎？

$('.formen').on('submit',function(e){
alert("TEST");
    e.preventDefault();
        $.ajax({
                type: "POST", 
                url: "booked.php", 
                data: $('.formen').serialize(),
                complete: function(data){
                    $('#namn, #epost').val('');    
                    },
                success: function(response){
                    alert("Complete!");
                }
        });
});

我試圖在提交表單時發出警報，但什么也沒發生

book.php

<form class = "formen" autocomplete="off">
  <div class="form-group">
       <label for="">Name</label>
       <input type="text" id = "namn" class="form-control" name="name">
  </div>
  <div class="form-group">
       <label for="">Email</label>
       <input type="email" id = "epost"class="form-control" name="email">
  </div>
  <input type = 'hidden' name = "datum" id = "datum" value = "<?php echo $date; ?>">
  <input type = 'hidden' name = "room" id = "room" value = "<?php echo $room; ?>">
  <button class="btn btn-primary" type="submit" name="submit">Submit</button>
</form>

是的，值已定義，我認為問題出在我的提交 function。這是我按下提交時 url 中顯示的內容。php?name=David&email=Test%40asdsa&datum=2020-05-28&room=1&submit= 我錯過了什么？ 我通過單擊一個按鈕來獲取表單，該按鈕也包含在 ajax 中：

$(document).on("click", '.boka', function() { 
$.ajax({
url:"book.php",
type:"POST",
data:{'date': $(this).data('date')},
success: function(data){
    $("#conf").html(data);
}
});

});

Answer 1

將event傳遞給您的submit function 並阻止事件提交表單，這是其默認功能，如下所示：

$('.formen').on('submit', function(event){
  event.preventDefault();
  .... # your rest of the code
});

PS $('#namn, #epost').val()條件只會檢查name的值是否存在，如果存在，即使email值為null ，表單也會被提交

Answer 2

您的代碼缺少document.ready() function。

所以這應該提醒測試。 和工作

$(document).ready(function(){

$('.formen').on('submit',function(e){
alert("TEST");
    e.preventDefault();
        $.ajax({
                type: "POST", 
                url: "booked.php", 
                data: $('.formen').serialize(),
                complete: function(data){
                    $('#namn, #epost').val('');    
                    },
                success: function(response){
                    alert("Complete!");
                }
        });
});
});

或者你可以嘗試另一種方式。 1.) 移除表單元素

2.) 添加加載器 div 以在提交期間顯示文本

3.) 添加result div來展示服務端的數據

4.) 在提交表單中將formen變量添加到 class

 <script src="jquery.min.js"></script>

<script>

$(document).ready(function(){


    $('.formen').click(function(e){
e.preventDefault();

var name = $('#name').val();
var email = $('#email').val();
var datum = $('#datum').val();
var room = $('#room').val();

    atpos = email.indexOf("@");
    dotpos = email.lastIndexOf(".");
        if(name==""){

            alert('please Enter name');


        }

 else if(email==""){

            alert('please Enter Email');


        }


else  if (atpos < 1 || ( dotpos - atpos < 2 ))
    {
        alert("Please enter correct email Address")
        return false;
    }


else{

$('#loader').fadeIn(400).html('<br><span> Please Wait, Your Data is being Submitted</span>');
var datasend = "name="+ name + "&email=" + email + "&datum=" + datum + "&room=" + room;

        $.ajax({

            type:'POST',
            url:'booked.php',
            data:datasend,
                        crossDomain: true,
            cache:false,
            success:function(data){

                $('#name').val('');
                                $('#email').val('');
                $('#loader').hide();
                $('#result').fadeIn('slow').prepend(data);
alert('data submitted');

            }

        });

        }

    })

});


</script>

  <div class="form-group">
       <label for="">Name</label>
       <input type="text" id = "name" class="form-control" name="name">
  </div>
  <div class="form-group">
       <label for="">Email</label>
       <input type="email" id = "email" class="form-control" name="email">
  </div>
  <input type = '' name = "datum" id = "datum" value = "">
  <input type = '' name = "room" id = "room" value = "">

<div id="loader"></div>
<div id="result"></div>
  <button class="formen btn btn-primary" type="submit"  name="submit">Submit</button>

booked.php

<?php
echo $name =$_POST['name'];
echo $email =$_POST['email'];
echo $datum =$_POST['datum'];
echo $room =$_POST['room'];

?>

Answer 3

$('.formen').on('submit',function(e){
        // preventDefault() method stops the default action of an element from happening.
        // https://www.w3schools.com/jquery/event_preventdefault.asp
        e.preventDefault();
        $.ajax({
                type: "POST", 
                url: "booked.php", 
                data: $('.formen').serialize(),
                success: function(response){
                    console.log(response);
                    alert("Complete!");
                },
                error: function(error){
                    console.log(error);
                },
                complete: function(data){
                    $('.formen').get(0).reset();
                }
        });
    });