Question

我的receive()函数解析来自后端服务器的数据，并使用该数据创建renderHTML()函数，该函数将解析后的数据显示为HTML字符串。我得到了要显示的数据，也可以完美地附上复选框。我试图获取questionid的值，以便当用户单击复选框时，我可以使用Ajax发送选择了哪个问题的值，这可以通过questionid来完成。我不确定如何获取questionid的值，存储它，并通过Ajax发送它。

function receive() {
  var text = document.getElementById("text").value;

  var data = {
    'text': text
  };

  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {

      var ourData = xhr.responseText;
      var parsedData = JSON.parse(ourData);
      console.log(parsedData);
      renderHTML(parsedData);
    }
  };
  xhr.open("POST", "URL", true);
  xhr.send(JSON.stringify(data));
}

var questionid;

function renderHTML(data) {
  var htmlString = "";

  for (i = 0; i < data.length; i++) {
    htmlString += "<p><input type='checkbox' value='data[i].questionid'>" +
      data[i].questionid + "." + "\n";
    htmlString += '</p>';
  }

  response.insertAdjacentHTML('beforeend', htmlString);

  var t = this;
  var checkboxes = document.querySelectorAll('input[type="checkbox"]');

  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].onclick = function() {
      if (this.checked) {
        console.log(this.questionid.value);
      }
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {

          var Data = xhr.responseText;
          console.log(Data);
          var parseData = JSON.parse(Data);
        };
        xhr.send(JSON.stringify(data));

      }
    }
  }

Answer 1

您可以通过多种方式实现所需目标。为此，您需要了解以下两个概念之一：

bind
closures

对于初学者来说，这些都不容易理解，但是一旦你得到它们，它们将帮助你大大提高你的编码技能。您可以分别阅读here和here。

您的代码（以及其他细节）的问题是i的值是全局的，因此在呈现DOM并且用户可以单击其中一个复选框时，所有复选框都具有相同的值我（最后一个）。

bind 可以帮助您通过设置一个始终保持不变的函数的参数来解决这个问题。

闭包通过存储在范围内声明的变量的值来帮助您解决这个问题，该范围只能从存储对该变量的引用的函数中访问。

以下是我编写的一些代码，它使用最现代的语法执行您想要的操作，我强烈推荐。

特别推荐您阅读fetch api;这是一种更清晰的方式来发出http请求。

此代码可以满足您的需求：

function receive() {
  const text = document.getElementById('text').value;

  const options = {
    method: 'POST',
    body: JSON.stringify({ text })
  }
  fetch("<the url here>", options)
    .then( response => response.json())
    .then( data => {
      renderHTML(JSON.parse(data));
    })
}

function renderHTML(data){
  for (const x of data) {
    const content = x.questionid;
            // i'm asuming that the response html element already exists
    response.insertAdjacentHTML('beforeend', `<p><input value="${content}" type="checkbox">${content}</p>`);
  }
  document.querySelectorAll('input[type="checkbox"]').forEach( input => {
    input.addEventListener((e) => {
      const options = {
        method: 'POST',
        body: JSON.stringify(e.target.value)
      };
      fetch('<the second url here>', options).then( response => response.json())
        .then( data => {

          // 'data' is the response you were looking for.

        })
    })
  })
}

如何从for循环中获取复选框的值

1 个答案: