语法错误:输入parseJSON的意外结束

I'm on about hour 5 of this and figure it's time to ask for help. I'm trying to use AJAX+php to upload an image and some text data on a form to a database. The total system is:

我大概在5小时左右，我想是时候寻求帮助了。我正在尝试使用AJAX+php将图像和一些文本数据上传到数据库中。整个系统是:

an input page with a form, social.php a php processing page, postMsg.php and a javascript function postMsg() that posts the form to the php processing page and is supposed to return the results to a div on social.php

一个带表单的输入页面，social。php一个php处理页面，postMsg。php和一个javascript函数postMsg()将表单发布到php处理页面，并将结果返回到social.php上的div

The problem is that the $.parseJSON(data) command in the javascript results in an "unexpected end of input" error:

问题是，javascript中的$.parseJSON(data)命令会导致“输入的意外结束”错误:

Failed:  
SyntaxError {stack: (...), message: "Unexpected end of input"}
(index):156
Uncaught SyntaxError: Unexpected end of input jquery.js:4235
b.extend.parseJSON jquery.js:4235
(anonymous function) (index):158
c jquery.js:4611
p.fireWith jquery.js:4687
k jquery.js:10335
r

I thought there was an issue with my javascript, but I code-checked it and it's fine:

我认为我的javascript有问题，但我进行了代码检查，结果很好:

     function postMsg() {
        console.log("submit event");
        var fd = new FormData(document.getElementById("commentSubmit"));
        fd.append("label", "WEBUPLOAD");
        document.getElementById('progressBar').style.display = 'block';

        $.ajax({
          url: "postMsg.php",
          type: "POST",
          xhr: function() {  // Custom XMLHttpRequest
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // Check if upload property exists
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
            }
            return myXhr;
          },
          data: fd,
          enctype: 'multipart/form-data',
          processData: false,  // tell jQuery not to process the data
          contentType: false   // tell jQuery not to set contentType
        }).done(function( data ) {
            console.log("PHP Output:");
            console.log( data );

            try {responseData = $.parseJSON(data)}
            catch (e) {console.log('Failed: ', e, data);}

            var items = $.parseJSON(data);
            document.getElementById('progressBar').style.display = 'none';
        });
        return false;
    }

Then I thought there was an issue with my php, but replaced it all with a simple command and it still resulted in the same error:

然后我认为我的php有问题，但是用一个简单的命令替换了它，它仍然导致了相同的错误:

$json_array = array('selfie'=>'hello');

Then I thought there might be an issue with my input form, so I rewrote that, but it's still returning the same error:

然后我想我的输入表单可能有问题，所以我重写了，但是它仍然返回相同的错误:

echo '<div data-role="fieldcontain" style="margin-top: -30px;margin-bottom: -30px;border-bottom: 0px;">
                <form method="post" name="commentSubmit" id="commentSubmit">
                  <div style="width=100%; font-size:.9em;" data-role="fieldcontain">
                  <label class="ui-input-text" for="msg_txt">Chip in:</label>';

//          $selfie = get_selfie($uid);
        echo '<div style="margin-top: 10px; margin-bottom: 10px; display: block; font-size:.9em">';

echo '<input name="file" type="file">';
        echo '<textarea style="width:100% text-align:left; font-weight:normal;" class="ui-btn ui-btn-inline ui-btn-icon-notext ui-btn-up-c" data-iconshadow="true" data-shadow="true" data-corners="false" cols="23" rows="1" name="msg_txt" id="msg_txt"></textarea>';
        echo '<a style="border-radius:8px" class="ui-btn ui-btn-inline ui-btn-icon-notext ui-corner-right ui-controlgroup-last ui-btn-up-c" title="My button" data-wrapperels="span" data-iconshadow="true" onclick="postMsg();" data-shadow="true" data-corners="true" data-role="button" data-icon="search" data-iconpos="notext" data-theme="c" data-inline="true"><span class="ui-btn-inner ui-corner-right ui-controlgroup-last"><span class="ui-btn-text">My button</span><span class="ui-icon ui-icon-search ui-icon-shadow">&nbsp;</span></span></a>';
        echo '<div id="photoUploaded" style="display: none;
position: relative;
text-align: center;
background-color: white;
opacity: .5;
color: black;
float: right; 
vertical-align: middle;
font-family: sans-serif;
border-radius: 10px;
padding: 10px;">photo loaded</div>';

                  echo '<input name="refresh" value="1" id="refresh" type="hidden">
                    <input name="uname" value="'.get_name($uid).'" id="uname" type="hidden">
                    <input name="uid" value="'.$uid.'" id="uname" type="hidden">

                </form>

Any ideas?

什么好主意吗?

1 个解决方案

#1

This plagued me for sometime as most of the answers to this same question get caught running down rabbit holes. Plus, the answer is hidden DEEP within the jquery documentation for the ajax object. Without further ado:

这个问题困扰了我一段时间，因为这个问题的大部分答案都是在兔子洞里被发现的。另外，答案隐藏在ajax对象的jquery文档中。闲话少说:

jQuery.ajax:dataType

jQuery.ajax:数据类型

"json": Evaluates the response as JSON and returns a JavaScript object. The JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. As of jQuery 1.9, an empty response is also rejected; the server should return a response of null or {} instead. (See json.org for more information on proper JSON formatting.)

“json”:作为json评估响应并返回一个JavaScript对象。JSON数据以严格的方式解析;任何格式错误的JSON都会被拒绝，并抛出一个解析错误。对于jQuery 1.9，也会拒绝一个空响应;服务器应该返回null或{}的响应。(有关正确的JSON格式的更多信息，请参阅json.org。)

Ergo, you must always at least return an empty JSON object or null from any request in order for jquery to accept it as valid.

因此，您必须至少从任何请求返回一个空的JSON对象或null，以便jquery将其接受为有效的。

#1