在按钮值中放置 ajax 请求

Place an ajax request in a button value

本文关键字：ajax 请求 按钮      更新时间：2023-09-26

我正在做一个测验，问题的答案是按钮。

我有一个 JSON 数据库，我可以请求该数据库的一部分（在本例中为"answerswerA"）并将其放入div 标签中。请求的代码是这样的：

function ajax_get_json(){
    var results = document.getElementById("results");
    var hr = new XMLHttpRequest();
    hr.open("GET", "question_database.json", true);
    hr.setRequestHeader("Content-type", "application/json", true);
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
            var data = JSON.parse(hr.responseText);
            var results = document.getElementById("results");
            results.innerHTML = data.stuff[0].AnswerA;
        }
    }
    hr.send(null);
    results.innerHTML = "requesting...";
}

现在，将结果放置在div 中是这样的，并且可以完美运行：

<div id="results"></div>
  <script type="text/javascript">ajax_get_json();</script>

但我想做的是将结果放在按钮的值中：

<input type="submit" class="answerswerButton" data-role="none" value="I'd like to place it here" />

无论如何如何做到这一点？

谢谢

或者在纯 js 中： 

var button = document.getElementsByClassName('answerButton')[0];
button.value = data.stuff[0].AnswerA;

但是您最好将id设置为此按钮。

只是简单地为按钮设置id，然后使用与div标签相同的id，而不是innerhtml使用值

        var results = document.getElementById("button_id");
        results.value = data.stuff[0].AnswerA;

您可以通过多种方式实现它，但似乎您的提交按钮没有 id，因此您可以使用如下所示的类

var elmts = document.getElementsByClass("answerswerButton");
elmts[0].value = data.stuff[0].AnswerA;

确保您仅将类"answerswerButton"用于此提交按钮。

希望它能帮助你。

使用 jQuery ，.val() 将设置每个匹配元素的值。 

$('.answerButton').val(data.stuff[0].AnswerA);

要仅更新第一个匹配的元素，请执行以下操作：

$('.answerButton:first').val(data.stuff[0].AnswerA);

使用JavaScript，可以使用element.value=或setAttribute。 querySelector将只返回一个与选择器匹配的元素。

document.querySelector('.answerButton').value=data.stuff[0].AnswerA;

或

document.querySelector('.answerButton').setAttribute('value' ,data.stuff[0].AnswerA);
相关文章：