發送ajax到php后如何關閉頁面重新加載以及如何修復此代碼

Question

將AJAX發送到PHP后如何關閉頁面重新加載？ 每次按提交時，頁面都會重新加載。 是否可以發送一些沒有表格的圖片？

<script>
    $(document).ready(function (e){
        $("#uploadForm").on('submit', (function(e){
            e.preventDefault();
            $.ajax({
                url: "/class/pdo/add_new_field.php",
                type: "POST",
                data:  new FormData(this),
                contentType: false,
                cache: false,
                processData:false,
                success: function(data){
                    $("#targetLayer").html(data);
                },
                error: function(){}             
            });
        }));

        $('#uploadForm').submit(function () {
            return false;
        });
    });
</script>

<form id="uploadForm" method="POST">
    <div style="margin-left: 75px;">
        <div class="save_divs">picture<input type="file"></div>
        <div class="save_divs">name:</div>
        <div class="save_divs">date</div>
        <div class="save_divs">short_info</div>
        <div class="save_divs">long info<input type="submit"></div>
    </div>
</form>

我需要在$.ajax網址中使用斜杠（ / ）嗎？

Answer 1

1. 太多的事件處理程序。 刪除第二個，除非sendContactForm(); 很重要 如果是，請用它更新您的問題。
2. 在事件處理程序語法錯誤，（從提交之前（funtion和的一個去除)從}));
3. 如果class是層次結構中的最上層文件夾，則可以使用/ class，如果它位於表單位置下，則否。 使用“班級/ ...”

像這樣

<script>
$(function(){
    $("#uploadForm").on('submit',function(e){
        e.preventDefault();
        $.ajax({
            url: "/class/pdo/add_new_field.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data){
                $("#targetLayer").html(data);
            },
            error: function(){}             
        });
    }); // also a ) too many here
});
</script>

Answer 2

好的，第一個問題是：-

1. 您已經使用on綁定了兩次提交，一次使用了submit()綁定一次，僅使用了一次。

2. 現在由於第二個綁定而出現錯誤，sendContactForm（）中存在一些錯誤，由於該錯誤永遠不會return false到該行，因此return false並且默認頁面已提交並重新加載，還檢查控制台錯誤，以防止混淆將來，您可能會使用e.preventDefault(); 在功能開始時停止進一步傳播。 （感謝@rory）

    $('#uploadForm').submit(function (e) { e.preventDefault(); sendContactForm(); return false; });