通过 JSON 响应发送状态数据到 POST - 通过 JavaScript 解析

Question

我有一个用于上传文件的 PHP 代码，它工作正常，作为最终结果，我发送了 JSON 响应，其中包含我无法检索的上传状态。

上传文件后 (POST) 我的回复如下：

{"html_content":"<p>File was uploaded<\/p>"}

PHP 上传代码如下：

if (!is_file($targetFile)) {
    move_uploaded_file($tempFile,$targetFile);
    $html_content="<p>File was uploaded</p>";
}
else {
    $html_content="<p>You have uploaded duplicate.</p>";
    move_uploaded_file($tempFile,$targetFile);  
}

$json_array=array('html_content'=>$html_content);

header('Content-type: text/json');
header('Content-type: application/json');
echo json_encode($json_array);

和JavaScript显示消息的主要代码：

this.on("success", function(file,responseText) {
    $.ajax({
        dataType: 'json',
        success: function (response) {

             var htmlElement = document.createElement("div");
             htmlElement.setAttribute("class","success-message");
             var responseText = response.html_content;
             var messageText = document.createTextNode(responseText);
             htmlElement.appendChild(messageText);
             file.previewTemplate.appendChild(htmlElement);

             console.log(response.html_content);
        }
    });
});

当我从 AJAX 部分展开上面的 JS 并将变量 responseText 设置为静态时，一切正常。

另外，当我不使用 AJAX 而只是输出 console.log(responseText); 时，我在控制台中得到了这个：

Object {html_content: "<p>File was uploaded</p>"}

我遗漏了什么线索吗？

Answer 1

您没有向 PHP 服务器发送请求。指定 URL 参数。

 $.ajax({url: "your_php_file",
         dataType: 'json',
         success: function (response) {
                   ...
                }
            });

甚至更好：

$.getJSON( "your_php_file", function( data ) { ... });

Answer 2

好的，解决了。 JavaScript 代码看起来像

        this.on("success", function(file,responseText) {

            str = JSON.stringify(responseText);
            responseMessage = $.parseJSON(str);

            var htmlElement = document.createElement("div");
            htmlElement.setAttribute("class","success-message");
            htmlElement.innerHTML = responseMessage.html_content;
            file.previewTemplate.appendChild(htmlElement);
        });

通过 JSON 响应发送状态数据到 POST - 通过 JavaScript 解析

Sending status data via JSON response to POST - parse via JavaScript

javascript

php

jquery

json

dropzone.js