javascript - Ajax获取内容后，我想调用另一个ajax函数

Question

我在侧边栏中创建了 ajax 调用，当我单击导航中的“颜色”时，它工作得很好，这里一切都很好。

代码是:

<a id='color'>Color</a>

Javascript 函数:

 document.getElementById('color').addEventListener('click', color);
function color(){
var xhr = new XMLHttpRequest();
xhr.open('GET', 'setting/color.php', true);
xhr.onload = function(){
if(this.status == 200){
 history.pushState(null, null, '?c=color');
 document.getElementById('content').innerHTML = this.responseText;
} else if(this.status = 404){
  document.getElementById('content').innerHTML = 'Not Found';
}
}
xhr.onerror = function(){
console.log('Request Error...');
}
xhr.send();
}

在它之后，我想要在颜色页面上这段代码，它在color.php上，这是来自ajax调用的。

            <div class="f-col s1 m1 l1">
                <label class="container f-padding">
                  <input class="cols" type="radio" name="cols" value="dark light-hover">
                  <span class="checkmark dark"></span>
                </label>
            </div>


            <div class="f-col s1 m1 l1">
                <label class="container f-padding">
                  <input class="cols" type="radio" name="cols" value="light dark-hover" checked="checked">
                  <span class="checkmark light"></span>
                </label>
            </div>

Javascript 函数在这里:

var colito = document.getElementsByClassName('cols');

var i;
for(i=0;i < colito.length;i++){
colito[i].addEventListener('click', colorSid);
function colorSid(e){
  e.preventDefault();
  var cols = this.value;
  var params = "cols="+cols;

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '../phppath/color.php', true);
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhr.onload = function(){
    console.log(this.responseText);
  }
  xhr.send(params);
}
}

如果我不刷新页面就不起作用，有人知道什么问题吗？

Answer 1

您必须将 html 保存在 color.php 中的字符串中并回显它。

$html = '<div class="f-col s1 m1 l1">
            <label class="container f-padding">
              <input class="cols" type="radio" name="cols" value="dark light-hover">
              <span class="checkmark dark"></span>
            </label>
        </div>


        <div class="f-col s1 m1 l1">
            <label class="container f-padding">
              <input class="cols" type="radio" name="cols" value="light dark-hover" checked="checked">
              <span class="checkmark light"></span>
            </label>
        </div>';

echo $html;