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;

Answer 2

我看到了您的javascript代码。您放置了在事件列表器中调用的函数，该函数必须在javascript for loop。之外。在下面，我编写代码以回答标题中提到的问题。

$.ajax({
     url:"your url",
     type: "GET",
     beforeSend: function(xhr){
         //xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
     },
     success: function(data) {
        console.log(data);
        var resp = JSON.parse(data);

          //call another ajax function here

      }
  });

Answer 3

固定！ 代码在第一个ajax函数^ _ ^内部

 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;
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);
 }
 }
 } else if(this.status = 404){
document.getElementById('content').innerHTML = 'Not Found';
}
  }
 xhr.onerror = function(){
 console.log('Request Error...');
  }
 xhr.send();
  }