javascript - formBuilder 中 html 内容的 JSON Parse / Unexpected Token 错误

Question

谁能告诉我为什么这会导致下面的错误。JSON 解析为 OK，但似乎有些不对劲。

我知道 Chrome 错误专门指第 44 位的字母 l 是问题，但我不明白为什么会导致问题。在我看来，HTML 内容已正确转义。

仅供参考，我正在使用 formBuilder 创建一个表单，然后将 JavaScript 对象转换为 JSON 字符串，然后使用类型为 "Content-type","application/x-www-form-urlencoded" 的 POST 通过 XMLHttpRequest 发送它通过 PHP 将其存储在 MYSQL JSON 字段中，而不对 JSON 执行任何操作。从数据库中提取 JSON 并将其提供给 formBuilder 时会发生此错误。我只是在读取 MYSQL 数据，然后将其回显，自从它到达以来，它还没有被编码/解码/转义或更改。我的理解是它应该由 Ajax 帖子自动编码，并在到达时由 PHP 自动解码，因此不应该有任何挥之不去的变化。

Chrome 说： Uncaught (in promise) SyntaxError: Unexpected token l in JSON at position 43

Firefox 说 : Uncaught (in promise) SyntaxError: JSON.parse: expected ',' or '}' after property value in object at the line 1 column 44 JSON data

 jQuery($ => {
  var fbTemplate = document.getElementById("fb-editor");
  var options = {
    dataType: "json",
    
    formData:'[{"type": "header", "label": "<span style=\"left: 491.077px; top: 101.108px; font-size: 20px; font-family: sans-serif; transform: scaleX(1.02306);\" dir=\"ltr\">ASSOCIATE MEMBERSHIP </span><span style=\"left: 754.523px; top: 101.108px; font-size: 20px; font-family: sans-serif; transform: scaleX(1.04423);\" dir=\"ltr\">APPLICATION</span>", "access": false, "subtype": "h1"}, {"name": "fname", "type": "text", "label": "First Name<br>", "access": false, "subtype": "text", "required": true, "className": "form-control"}, {"name": "sname", "type": "text", "label": "Surname", "access": false, "subtype": "text", "required": true, "className": "form-control"}, {"name": "radio-group-1621069307908", "type": "radio-group", "label": "Sex", "other": false, "access": false, "inline": false, "values": [{"label": "Male", "value": "Male", "selected": false}, {"label": "Female", "value": "Female", "selected": false}], "required": true}, {"name": "address", "type": "text", "label": "Address", "access": false, "subtype": "text", "required": true, "className": "form-control"}, {"name": "suburb", "type": "text", "label": "Suburb/Town", "access": false, "subtype": "text", "required": true, "className": "form-control"}, {"name": "postcode", "type": "text", "label": "Postcode", "access": false, "subtype": "text", "required": true, "className": "form-control"}, {"name": "state", "type": "select", "label": "State", "access": false, "values": [{"label": "VIC", "value": "VIC", "selected": true}, {"label": "NSW", "value": "NSW", "selected": false}, {"label": "QLD", "value": "QLD", "selected": false}], "multiple": false, "required": true, "className": "form-control"}, {"name": "DOB", "type": "date", "label": "DOB", "access": false, "required": true, "className": "form-control"}, {"name": "phone", "type": "text", "label": "Home Phone<br>", "access": false, "subtype": "tel", "required": false, "className": "form-control"}, {"name": "molbile", "type": "text", "label": "Mobile", "access": false, "subtype": "tel", "required": false, "className": "form-control"}, {"name": "email", "type": "text", "label": "Email", "access": false, "subtype": "email", "required": true, "className": "form-control"}]',    
    onSave: function() {
      save();
    }
  };

  var formBuilder = $(fbTemplate).formBuilder(options);

error_parsing_json

我正在将数据发送到 PHP，如下所示：

   jsonformdata = JSON.stringify(formdata);
    jsonformother = JSON.stringify(formother);
    
var params = 'form=' + jsonformdata + "&other=" + jsonformother;
      var updateurl = '/Admin/save-form.php';
    
    
     var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        
                //console.log("array " + formdata);
console.log("Posted " + params);
 console.log("Got back " + xhttp.responseText);
  window.alert("Your changes were saved.");
  document.getElementById('messagesresult').innerHTML="Your changes were saved";
    document.getElementById('messagesresult').style.background="green";

  setTimeout(function() {document.getElementById('messagesresult').innerHTML="";
                 document.getElementById('messagesresult').style.background="white";

             }, 5000);

  
       
     }
   };

   xhttp.open("POST", updateurl, true);
        xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

   xhttp.send(params);
    
   
   
  }

经过进一步测试，我发现如果我从 JSON 中删除第一个 formBuilder 项，则不再有任何错误。

表单中第一项的代码如下所示：

{"type": "header", "label": "<span style=\"left: 491.077px; top: 101.108px; font-size: 20px; font-family: sans-serif; transform: scaleX(1.02306);\" dir=\"ltr\">ASSOCIATE MEMBERSHIP </span><span style=\"left: 754.523px; top: 101.108px; font-size: 20px; font-family: sans-serif; transform: scaleX(1.04423);\" dir=\"ltr\">APPLICATION</span>", "access": false, "subtype": "h1"}

这通过了所有 JSON 验证器，它没有隐藏字符，并且据我所知是根据规范进行编码的。

标签： javascriptphpjsonformbuilder