使用JQuery解析JSON字符串时出错

Error while parsing JSON string using JQuery

本文关键字：出错 字符串 JSON JQuery 解析 使用      更新时间：2023-09-26

我试图从JSON字符串读取值，并使用JavaScript alert()语句显示它的一些值。但是我在控制台得到以下异常。

请指导。<<p> 控制台异常/strong> 

SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
...dc=/'?/;n.parseJSON=function(a){return JSON.parse(a+"")},n.parseXML=function(a){...
at jquery.min.js(line 4, col 5304)

process.js 

$(document).ready(function () {
    //for handling json data
    var json = $("#studentJsonDiv").data("students-json");
    console.log(json);
    $.each($.parseJSON(json), function (idx, obj) {
        alert(obj.name);
    });
});

home.jsp 

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="js/process.js"></script>
    </head>
    <body>
        From JQuery (JSON): <div id="studentJsonDiv" data-students-json='${studentsJson}'></div>
    </body>
</html>

查看页面home.jsp源码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="js/process.js"></script>
    </head>
    <body>
        From JQuery (JSON): <div id="studentJsonDiv" data-students-json='[{"id":1,"name":"Jack"},{"id":2,"name":"Jill"}]'></div>
    </body>
</html>

由于jQuery 1.6的.data()方法解析值，所以删除$.parseJSON()。您正在解析导致此处错误的对象而不是字符串。另外检查-为什么jQuery自动解析我的data-*属性?

每次尝试将字符串转换为JavaScript值(包括布尔值、数字、对象、数组和null)。只有在不改变值的表示形式的情况下，才会将值转换为数字。例如，"1E02"answers"100.000"作为数字是等价的(数值100)，但是转换它们会改变它们的表示，因此它们将作为字符串保留。字符串值"100"被转换成数字100。

当数据属性是一个对象(以'{'开头)或数组(以'['开头)，则jQuery。parseJSON用于解析字符串;它必须遵循有效的JSON语法，包括带引号的属性名。如果该值不能作为JavaScript值进行解析，则将其保留为字符串。(摘自https://api.jquery.com/data/)

$(document).ready(function() {
  //static message
  var msg = "Hello World from JQuery!";
  $("#mydiv").text(msg);
  //dynamic message processing for displaying value in div element
  var students = $("#studentDiv").data("students");
  $("#studentDiv").text(students);
  //for handling json data
  var json = $("#studentJsonDiv").data("students-json");
  //     change value here ---------------^------^------
  console.log(json);
  $.each(json, function(idx, obj) {
    alert(obj.name);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mydiv"></div>
From JQuery:
<div id="studentDiv" data-students="[Student{id=1, name=Jack}, Student{id=2, name=Jill}]"></div>
From JQuery (JSON):
<div id="studentJsonDiv" data-students-json='[{"id":1,"name":"Jack"},{"id":2,"name":"Jill"}]'></div>

您得到的数据是一个对象数组。你只需要迭代它，而不需要再次解析它。还有，正确的属性名。

var json = $("#studentJsonDiv").data("students-json");
$.each(json, function (idx, obj) {
    alert(obj.name);
});

您需要在数据中使用students-json，因为这是您拥有json数据的地方

var json = $("#studentJsonDiv").data("students-json");
$.each($.parseJSON(json), function(idx, obj) {
    alert(obj.name);
});

如果你在解析

[Student{id=1, name=Jack}, Student{id=2, name=Jill}]

Student后面缺少:

相关文章：