Question

我使用ajax进程修改index.php文件上的用户状态。

它有效，但我想为用户状态的div函数着色

我的代码：

function recupstatut() {
  $.post('recup.php', function(data) {
    $('.cont2').html(data);

    var content = document.querySelector('#cont2');
    var status2 = content.innerHTML;

    if (status2 == "En-ligne") {
      content.style.backgroundColor = "#4CAF50";
    } else {
      content.style.backgroundColor = "#f44336";
    }
  });
}

setInterval(recupstatut, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="cont2" id="cont2">
</div>

条件始终应用else状态：

content.style.backgroundColor = "#f44336";

我认为问题来自var status2 =

我该如何解决这个问题？

Answer 1

<强> HTML

<div class="cont2" id="cont2"></div>

<强> SCRIPT

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
function recupstatut() {
   $.post('recup.php', function(data) {
      console.log(data);
      var status2 = data.trim();
      console.log(status2);
      $('.cont2').html(status2);
      if (status2 == "En-ligne") {
         content.style.backgroundColor = "#4CAF50";
      } else {
         content.style.backgroundColor = "#f44336";
      } 
  });
}
setInterval(recupstatut, 1000);
</script>

出了什么问题，你在调用函数

后导入了jquery文件

所以在调用你的函数之前进行导入

你的错误是你在调用函数后进行了导入，这就是你得到未定义错误的原因。

Answer 2

正如您在页面中提到的echo字符串，您可以直接从data按照以下代码检查此字符串。

<强>脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
$(function(){
    function recupstatut() {
      $.post('recup.php', function(data) {

        $('#cont2').html(data); // If the data return from the php page as a string then you can compare it directly.

        if (data == "En-ligne") {
          $('#cont2').css("backgroundColor","#4CAF50");
        } else {
          $('#cont2').css("backgroundColor","#f44336"); 
        }

      });

    }

    setInterval(recupstatut, 1000);
});

</script>

HTML：

<div class="cont2" id="cont2"></div>

Answer 3

function recupstatut(){
        $.post('recup.php',function(data){
			console.log(data);
            $('.cont2').html(data);
			
			var status2 = data;
	if (status2 == "En-ligne") {
      $('#cont2').css("backgroundColor","#4CAF50");
    } else {
      $('#cont2').css("backgroundColor","#f44336"); 
    }

  });

}
	

	


    setInterval(recupstatut,1000);

现在我的div中没有任何内容出现在console.log中......

Answer 4

有很多方法可以完成这个。您可以通过将 $。post 作为变量发送来使用 $ .post（）功能。例如：

// Fire off the request to /form.php
request = $.post({
    url: "recup.php",
});

// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
    // Log a message to the console
    console.log("Hooray, it worked!");
});

// Callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
    // Log the error to the console
    console.error(
        "The following error occurred: "+
        textStatus, errorThrown
    );
});

// Callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
    // Reenable the inputs
    $inputs.prop("disabled", false);
});

或（我推荐）以这种方式使用 $。ajax（{}）功能：

// Fire off the request to /form.php
$.ajax({
    url: "recup.php",
    type: "post",
    data: { //specify data to be sent },
    beforeSend:function(){ 
      /* before sending the data to the other page 
         may be a loader to show waiting animation
       */
    },
    success:function(status){
      /* this will check the response received from the previous page 
         and the determine the below conditions 
       */
        if (status == "En-ligne") {
        content.style.backgroundColor = "#4CAF50";
        } else {
          content.style.backgroundColor = "#f44336";
        }
    }
});

如何在ajax中处理进程后定义变量？

4 个答案: