在位置0的JSON中的意外令牌r（...）

Question

我正在开发基于STM32 MCU的Web服务器。浏览器向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); 

     } 
    }) 
}); 
    }); 

你可以看到我设置的网址为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状态码，只有在存在主体时才解析JSON数据。

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

在jQuery 1.9的，空的响应也被拒绝;服务器应该返回null或{}的响应。

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

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