e.preventDefault（）不工作，返回false並嘗試更多

Question

我想通過ajax提交數據並輸入到數據庫。但是，我能得到它的唯一方法是如果它重定向到PHP文件。我嘗試過使用e.preventDefault();，e.stopImmediatePropagation();和return false;，但沒有任何效果。我最終在表單提交時運行該函數，它從PHP文件中獲取答案，但沒有輸入到數據庫中。

這是我的代碼工作（但加載PHP頁面）：

function uploadImage(e) { 
e.preventDefault(); 
e.stopImmediatePropagation(); 
var input = document.getElementById("images"), 
    date = document.getElementById("image_date").value, 
    formdata = new FormData(); 

$.ajax({ 
    url: "submit_image.php", 
    type: "POST", 
    data: formdata, 
    processData: false, 
    contentType: false, 
    success: function (res) { 
     document.getElementById("response").innerHTML = res; 
     hideImageUpload(); 
     removeAllPosts(); 
     getAllPosts(); 
    } 
}); 

return false; 
}  

這裏是行不通的代碼，但得到的迴應：

$('#image_upload_form').on('submit', function uploadImage(e) { 

    var input = document.getElementById("images"), 
    date = document.getElementById("image_date").value, 
    formdata = new FormData(); 

    $.ajax({ 
     url: "submit_image.php", 
     type: "POST", 
     data: formdata, 
     processData: false, 
     contentType: false, 
     success: function (res) { 
      document.getElementById("response").innerHTML = res; 
      hideImageUpload(); 
      removeAllPosts(); 
      getAllPosts(); 
     } 
    }); 

    e.preventDefault(); 
    e.stopImmediatePropagation(); 
    return false; 

}); 

，這裏是的PHP：

<?php 
    require_once 'core/init.php'; 
    $user = new User(); 
    $errors = $_FILES["images"]["error"]; 
    $date = $_POST['image_date']; 
    $d = explode("/", $date); 
    $nd = $d[2] . '-' . $d[0] . '-' . $d[1] . ' 00:00:00'; 
    echo $nd; 
    foreach ($errors as $key => $error) { 
     if ($error == UPLOAD_ERR_OK) { 
      $name = $_FILES["images"]["name"][$key]; 
      //$ext = pathinfo($name, PATHINFO_EXTENSION); 
      $name = explode("_", $name); 
      $imagename=''; 
      foreach($name as $letter){ 
       $imagename .= $letter; 
      } 

      move_uploaded_file($_FILES["images"]["tmp_name"][$key], "images/uploads/" . $user->data()->id . '_' . $imagename); 

      $user->create('photos', array(
       'osid' => $user->data()->id, 
       'user' => $user->data()->username, 
       'gallery' => 'Uploads', 
       'filename' => "images/uploads/" . $user->data()->id . '_' . $imagename, 
       'uploaddate' => $nd 
      )); 
      $user->create('status', array(
       'osid' => $user->data()->id, 
       'account_name' => $user->data()->username, 
       'author' => $user->data()->name . ' ' . $user->data()->surname, 
       'type' => 'image', 
       'data' => "images/uploads/" . $user->data()->id . '_' . $imagename, 
       'postdate' => $nd 
      )); 
     } 
    } 


    echo "<h2>Successfully Uploaded Images</h2>"; 

有什麼，我失蹤？

Answer 1

我不能評論你的php的有效性，但在你的AJAX調用中，你不會將元素附加到formdata對象。 https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

$('#image_upload_form').on('submit', function uploadImage(e) { 
    e.preventDefault(); 
    var formdata = new FormData(); 
    formdata.append('images', $('#images')[0].files[0]); 
    formdata.append('image_date', $('#image_date').val()); 

    $.ajax({ 
     url: "submit_image.php", 
     type: "POST", 
     data: formdata, 
     processData: false, 
     contentType: false, 
     success: function (res) { 
      $("#response").html(res); 
      //or console.log(res); and see the response in the console window (press F12) 
      hideImageUpload(); 
      removeAllPosts(); 
      getAllPosts(); 
     } 
    }); 
    return false; 
}); 

您可以使用jQuery的方法，而不是JavaScript的document.getElementById讓你的元素（和數據），使代碼更易於閱讀。

Answer 2

您可以使用jQuery submit()方法觸發提交事件，或附加一個函數以在發生提交事件時運行。

您可以通過在事件對象上調用.preventDefault()或從處理程序返回false來取消提交操作。檢查jQuery .submit()文檔。

你可以通過調用append()方法，像這樣建立你FORMDATA對象：

formdata.append('images', $('#images').files[0]);

檢查FormData Objects DOC

$("#image_upload_form").submit(function(event) { 

    var formdata = new FormData(); 
    formdata.append('images', $('#images').files[0]); 
    formdata.append('image_date', $('#image_date').val()); 

    $.ajax({ 
     url: "submit_image.php", 
     type: "POST", 
     data: formdata, 
     processData: false, 
     contentType: false, 
     success: function (res) { 
      document.getElementById("response").innerHTML = res; 
      hideImageUpload(); 
      removeAllPosts(); 
      getAllPosts(); 
     } 
    }); 


    event.preventDefault(); 

}); 

更多ajax()方法的信息，我建議閱讀本jQuery.ajax()