JSON 中的意外标记 r 位于位置 0(...)

Question

I'm now developing a web server based on STM32 MCU. The browser send request to MCU then MCU response a web html file. User can further set the parameters and using form to submit the parameters back to MCU for broadcasting. Now I got a problem with it. I try to send the data of form in JSON data type. But somehow it return me an error. "Unexpecteded token r in JSON at position 0(...)". Here is my code for submit.

$(document).ready(function(){
    // click on button submit

    $("#broadcastform").on('submit', function(e){
        e.preventDefault();
        $.ajax({
            url: '192.168.0.10',
            type : "POST",
            dataType : 'json',
            data: $(this).serialize(),
            success : function(result) {
            console.log(result);
            alert($(this).serialize());
            },
            error: function(xhr, resp, text) {
            console.log(xhr, resp, text);

        }
    })
});
   });

You can see I set the url as 192.168.0.10 which is the ip of my MCU Platform. And here is my form code.

<form name="broadcastform" id="broadcastform" method="post" action="">  


    <h1 id="broadcast_title" style="color:rgba(255,255,255,0.7);font-size: 250%;font-weight: 400;margin-top:-10px" align="middle">BROADCAST</h1>
    <hr style="border-color:#ffffff;weight:40%;margin:0 auto;margin-bottom:20px">
    <center class="page_intro">
    <div style="margin-top:-1%;color:rgba(255,255,255,0.7);width:90%;margin-bottom:12.5%" class="page_intro">
    <font size="6" style="line-height: 150%"class="page_intro"><center>Welcome!</center></font>
    <font size="5" style=" padding-top:20px;line-height: 150%;font-weight:normal;opacity:0.7"class="page_intro"><center>This is a Tool to Configure and Broadcast Your Modulator. Please Follow the Steps and Fill in the Parameter Fields for Your Preference. Enjoy the Tour !</center></font>
    </div>
    </center>
    <!-- Page Basic Setting --> 
    <select name="InputSource"  class="required page_basic" style="margin-left:23%" form="broadcastform" >

                <option value="">Broadcast Input</option>             
                <option value="0">HDMIPhy</option>             
                <option value="1">USB Streaming</option>             
                <option value="2">MPEC-TS Interface</option>             
                <option value="3">VIP(Ethernet)</option>         
    </select>
    <select name="ModulationMode"class= "page_basic required" style="margin-left:23%" form="broadcastform">             
                <option value="">Modulation Mode</option>             
                <option value="1">ATSC</option>             
                <option value="2">DTMB</option>             
                <option value="3">DVB</option>             
                <option value="4">ISDB</option>         
    </select>           
    <input type= "text" name= "ProviderName" placeholder="Provider Name" maxlength="16" class="required page_basic">      
    <input type= "text" name= "ServiceName" placeholder="Service Name" maxlength="16" class="required page_basic" style="margin-bottom:8%">

    <!-- Page IP Setting. Only with ETH Input Source--> 
    <input type= "text" name= "LocalIP" class="page_ip" placeholder="Local IP" style="margin-top:30px"  id="LocalIp">             
    <input type= "text" name= "RemoteVIPAddr" class="page_ip" style="margin-top:7%" placeholder="Remote VIP Address" id="RemoteIp">
    <input type= "text" name= "RemoteVIPPort" class="page_ip" style="margin-top:7%;margin-bottom:11.8%"  placeholder="Remote VIP Port"id="RemoteVIPPort">

    <!-- Page RF Setting -->              
    <input type= "text" name= "RFOutFreq" class="page_rf" style="margin-top:7%" placeholder="RF Output Frequency"  id="RFOutFreq">
    <input type= "text" name= "RFIfFreq" class="page_rf"style="margin-top:7%" placeholder="RF IF Frequency" id="RFIfFreq">         
    <input type= "text" name= "RFBandwidth" class="page_rf" style="margin-top:7%;margin-bottom:11.8%" placeholder="RF Bandwidth" id="RFBandwidth">   

    <!-- Page EncryptKey Setting -->              
    <input type= "text" name= "EncryptKeyLo" class="page_encrypt" style= "margin-top:13%" placeholder="Encrypt Key Low" id="EncryptKeyLo">  
    <input type= "text" name= "EncryptKeyHi" class="page_encrypt" style=" margin-top:13%;margin-bottom:16.1%" placeholder="Encrypt Key High" id="EncryptKeyHi">
<input id="submit" type="submit" value="Submit" class="btn inner" />
</form>

Anyone has idea about it? been stuck at this point for a long time.

Also, when I added console.log($(this).serialize()); in my ajax code "error" part(which will be executed if i press submit). It shows nothing. It seems like a empty object. But I just do the form.submit(); My MCU can receice "x-www-form-urlencoded" data.

I checked the console again. The response text is not in json form. It is still in urlencoded form.

Answer 1

This is most likely an issue with the response being a success, not an error, but the server didn't return a response body. Trying to parse an undefined result will cause these sorts of errors in JSON parsers.

Check the network tab in your browser's inspector and see if the response is a 204 No Content . If it is, you'll need to remove the dataType : 'json' line from your AJAX call and handle the response manually in your success handler. Only parse the response data if the the response code isn't 204 .

success: function(data, textStatus, xhr) {
    if (xhr.status !== 204) {
        var obj = JSON.parse(data);
    }
},

I have no idea what version of JQuery you're using so this example may not work in all versions, but the principle is the same. Check for 204 status code, only parse the JSON data if there is a body.

Note: According to the JQuery documentation for $.ajax() :

As of jQuery 1.9, an empty response is also rejected; the server should return a response of null or {} instead.

However, I don't know if "rejected" in this case means calling the error method.

If all else fails, simply remove the dataType: 'json', setting from your $.ajax() call to tell JQuery not to try and parse the response as JSON.

Answer 2

The Error

Unexpected token r in JSON at position 0(…)

It means your request get an unexpected response, which means this message is a kind of error response code. To resolve this you need to catch the response code and response header/body on the network.

For example , once your request payload is overloading and the response give 413 error code but no response body. Trying to display response body would give you an unexpected token as the display.