Question

我有test.js：

const header = document.querySelector('header');
const section = document.querySelector('section');
let requestURL = 'list';
let request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();

let mainContent = '', main = document.getElementById ("main");

request.onload = function() {
  const students = request.response;
  students.forEach(student => {
  output(student);
  mainContent += '<button id="edit" onclick="input(' + JSON.stringify(student) + ')">Id: ' + student.id + '</button>'});
  main.insertAdjacentHTML ("afterEnd", mainContent);
}

function output(jsonObj) {
    console.log(jsonObj);

}
function input(jsonObj){
    document.getElementById('id').value = jsonObj.id;
}

还有test.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rest API</title>
</head>
<body>
<header></header>
<div id="main"></div>
<input id="id" value="" type="text" placeholder="Id">
<script src="/students/res/test.js"></script>
</body>
</html>

这就是我在浏览器中得到的：Click

因此，“函数output（jsonObj）”可以正常工作，但是当我试图将数据从特定对象传递到“输入”时（必须使用某种形式的数据（名称，年龄等）将会发生变化）我得到以下信息：“未捕获的SyntaxError：输入的意外结束” Click

在这里找到了一些信息：onclick="doSomething([object Object])" Uncaught SyntaxError: Unexpected identifier。但这对我不能像这样硬编码数据没有多大帮助：

var params = {a:1,b:2};

那么我在做什么错了？（不应使用任何框架）

Answer 1

最简单的方法是执行以下操作：

index.html

但是您实际上根本不应该使用onXXX方法，因为如果存在Content-Security-Policy，它们将被无效。您应该使用mainContent += '<button id="edit" onclick="function() { input(' + JSON.stringify(student) + ');}"> Id: ' + student.id + '</button>'});

Answer 2

您可以简单地使用：

onclick="myFunction({greeting:'abc'})"

Answer 3

已解决：

let requestURL = 'list';
let request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();

let main = document.getElementById ("main");

request.onload = function() {
  const students = request.response;
  students.forEach(student => {
  var  button = document.createElement("button");
  button.innerHTML = 'Id: ' + student.id;
  main.appendChild(button);
  button.addEventListener("click", function(){
      input(student);
    });
  })
}

function input(jsonObj){
    document.getElementById('id').value = jsonObj.id;
    document.getElementById('name').value = jsonObj.firstName;
    document.getElementById('age').value = jsonObj.age;
}

如何传递json功能？

3 个答案: