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() doc。

您可以通过调用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()

e.preventDefault（）不起作用，返回false并尝试更多

2 个答案: