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

Question

我现在正在开发一个基于 STM32 MCU 的网络服务器。浏览器向 MCU 发送请求，然后 MCU 响应一个 web html 文件。用户可以进一步设置参数并使用表单将参数提交回MCU进行广播。现在我遇到了问题。我尝试以 JSON 数据类型发送表单数据。但不知何故，它给我返回了一个错误。 “位置 0(...) 处的 JSON 中的意外标记 r”。这是我的提交代码。

$(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);

        }
    })
});
   });

您可以看到我将 url 设置为 192.168.0.10，这是我的 MCU 平台的 ip。这是我的表单代码。

<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>

有人知道吗？一直卡在这个点上。

此外，当我添加 console.log($(this).serialize());在我的 ajax 代码“错误”部分(如果我按提交将执行)。它什么也没显示。它看起来像一个空对象。但我只是做了 form.submit();我的 MCU 可以接收“x-www-form-urlencoded”数据。

我再次检查了控制台。响应文本不是 json 格式。它仍然是 urlencoded 形式。

Answer 1

这很可能是响应成功的问题，而不是错误，但服务器没有返回响应正文。尝试解析 undefined 结果将导致 JSON 解析器出现此类错误。

检查浏览器检查器中的网络选项卡，查看响应是否为 204 No Content。如果是，您需要从 AJAX 调用中删除 dataType : 'json' 行，并在您的 success 处理程序中手动处理响应。仅当响应代码不是 204 时才解析响应数据。

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

我不知道您使用的是哪个版本的 JQuery，因此该示例可能不适用于所有版本，但原理是相同的。检查204状态码，只有有body才解析JSON数据。

注意:根据 $.ajax() 的 JQuery 文档:

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

但是，我不知道在这种情况下“被拒绝”是否意味着调用error 方法。

如果一切都失败了，只需从 $.ajax() 调用中删除 dataType: 'json', 设置，告诉 JQuery 不要尝试解析响应作为 JSON。