Question

我正在尝试将hSON数据从html发送到javascript函数。

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8' />"
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel=\"stylesheet\" href=\"roboto.css\">
    <link rel=\"stylesheet\" href=\"webViewLightTheme.css\">
</head>
<body>
    <img src=\"http://x.y.z/wp-content/uploads/2017/12/android-smart-text-selection-350x175.jpg\" onClick=\"window.JavaScriptInterface.showImages( \"[{\"name\":\"John\",\"age\":30,\"city\":\"New York\"}]\" );\" />"
</body>
</html>

但是在图片上点击我会收到Uncaught SyntaxError: Invalid or unexpected token

我想知道如何将JSON数据从html部分发送到javascript部分。

Answer 1

以下是工作样本。

＆＃13;

function process(json) {
  // Do whatever you want with the json object
  // Example
  console.log(json[0].name);
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8' />"
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel=\"stylesheet\" href=\"roboto.css\">
    <link rel=\"stylesheet\" href=\"webViewLightTheme.css\">
</head>
<body>
    <img src="http://x.y.z/wp-content/uploads/2017/12/android-smart-text-selection-350x175.jpg" onClick="process([{'name':'John', 'age': '30', 'city':'New York'}]);" />"
</body>
</html>

＆＃13;

Answer 2

尝试JSON library

const img = document.getElementById('img');
img.addEventListener('click', function() {
  let jsonString = '"[{"name":"John","age":30,"city":"New York"}]';
  window.JavaScriptInterface.showImages(JSON.parse(jsonString));
});

Answer 3

JSON数据中的双引号会干扰属性的引号。您需要再次转义JSON数据中的除法引号（添加\），以便我们没有看到封闭的内容，并且HTML解析器知道JSON数据中的双引号是数据的一部分你要传入，而不是要结束引用。

编辑：或者您可以使用单引号，就像在视口标记中那样，因为HTML和Javascript都不区分单引号和双引号。这可能会使整个事情变得更容易混淆和更容易阅读。

Answer 4

不推荐的：

＆＃13;

console.log('onclick= '+document.images[0].getAttribute('onclick'));
window.JavaScriptInterface={}
window.JavaScriptInterface.showImages=function(x){console.log(x)}
document.images[0].click()

＆＃13;

<img src="http://x.y.z/wp-content/uploads/2017/12/android-smart-text-selection-350x175.jpg\" onclick='window.JavaScriptInterface.showImages("[{\"name\":\"John\",\"age\":30,\"city\":\"New York\"}]")'>

＆＃13;

更好地使用像@Reijo那样的addEventListener，

如何将hSON数据从html发送到javascript函数

4 个答案: