javascript - 显示 ajax 结果数据保存

Question

我正在处理用 ajax 保存的数据和文件形式。我关注了这篇文章 uploading-both-data-and-files-in-one-form-using-ajax并且工作得很好，数据保存在数据库中，文件(图像)存储在他的文件夹中。唯一的问题是我无法让它在一切正常时显示“成功”或在出现问题时显示“错误”……它总是显示“加载已执行”。但它显示是因为我插入了这个但是当里面有错误时它不会向我显示错误......总是“加载已执行。”

我在插入代码中创建了一个错误或成功模式消息，我将 <?php echo $alert; ?>在表单页面中，但消息没有出现...

你能帮我解决我的问题吗？

如果能显示一个加载器(在 gif 中)也会更好..

给你看代码:

JS:

$("form#data").submit(function(){   
    var formData = new FormData($(this)[0]);    
    $.ajax({
        url: "includes/galeria.php?ts=" + new Date().getTime(),
        type: 'POST',
        data: formData,
        async: false,
        success: function(data) {
 $('.result').html(data);
 alert('Load was performed.');
        },
        cache: false,
        contentType: false,
        processData: false
    }); 
    return false;
});

画廊.php:

<?php 
    require_once("connection.php");
    require_once("settings.php");
    $alert = "";
    if(isset($_FILES['imgaleria'])) {
        $extension = pathinfo($_FILES['imgaleria']['name']);
        $extension = $extension["extension"];
        $allowed_paths = explode(", ", $allowed_ext);
        $valid = 0;
        for($i = 0; $i < count($allowed_paths); $i++) {
            if ($allowed_paths[$i] == "$extension") {
                $valid = 1;
            }
        }
        if ($valid == 1 && $_FILES["imgaleria"]["size"] <= $max_weight) {
            if (file_exists("../assets/img/galeria/" . $_FILES["imgaleria"]["name"])) {
                $alert = '<p class="error">' . $_FILES["imgaleria"]["name"] . ' El nombre del archivo ya existe!' . '</p>';
            } else {
                move_uploaded_file($_FILES["imgaleria"]["tmp_name"], "../assets/img/galeria/" . $_FILES["imgaleria"]["name"]);
                $save = $_FILES["imgaleria"]["name"];
                $statement = $conn->prepare("INSERT INTO GALERIA (imgtitulo, imgdescripcion, imgcategoria, imgaleria) VALUES (?, ?, ?, ?)");
                if ($statement->execute(array($_POST['imgtitulo'],$_POST['imgdescripcion'],$_POST['imgcategoria'],$save))); 
                $dbSuccess = true; 
                $alert = '<p class="ok">' . ' Oferta agregada satisfactoriamente!' . '</p>';
                $dbh = null;
            }
        } else {
            $alert = '<p class="error">' . ' Tipo de archivo inv&aacute;lido!' . '</p>';
        }
    }
?>

表单页面.php:

    <form class="form-horizontal" id="data" name="data" method="post" enctype="multipart/form-data">
        <fieldset>
            <?php echo $alert; ?>
            <div class="control-group">
                <label class="control-label col-md-4"><?php echo $translate->__('Image title'); ?> :</label>
                <div class="col-md-5">
                    <input type="text" class="form-control" name="imgtitulo" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label col-md-4"><?php echo $translate->__('Image description'); ?> :</label>
                <div class="col-md-5">
                    <textarea id="maxlength_textarea" class="form-control" maxlength="225" name="imgdescripcion" /></textarea>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label col-md-4"><?php echo $translate->__('Image category'); ?> :</label>
                <div class="col-md-5">
                    <input type="text" class="form-control" name="imgcategoria" />
                </div>
            </div>                  
            <div class="control-group">
                <label class="control-label col-md-4"><?php echo $translate->__('File to upload'); ?> :</label>
                <div class="col-md-3">
                    <input name="imgaleria" type="file" />
                </div>
            </div>
            <div class="control-group">
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-sd-offset-9 col-md-12"><br />
                            <button class="btn btn-info" name="enviar"><i class="fa fa-check"></i> <?php echo $translate->__('Save'); ?></button>
                        </div>
                    </div>
                </div>
            </div>          
        </fieldset>
    </form>
    <div id="loading" style="display:none;"><img src="assets/img/ajax_loader.gif" /></div>

Answer 1

您误解了 PHP、HTML 和 JQuery (javascript) 之间的关系。

在任何 HTML 输出到浏览器之前，PHP 在服务器上执行。您不能在页面加载后执行 ajax 调用，然后使用 PHP 打印该调用。别这么想了。相反，您需要使用 JQuery 来操作 HTML。

所以这个 JQuery 代码是正确的:

success: function(data) {
  $('.result').html(data);
}

但是您需要页面上有一个带有 class="result"的 HTML 元素才能工作:

<div class="result">RESULT APPEARS HERE AFTER AJAX CALL</div>

你实际上应该定位一个 ID 而不是一个类，所以我会使用 #result 而不是 .result 和 id="result" 而不是 class="result"。请阅读一本关于 PHP 和 Javascript 交互的初学者书籍，因为在开始之前您需要了解基础知识。