Question

我正在尝试使用javascript向DB发出两个请求，第一个允许我从db中获取一个值来决定水箱的颜色，第二个是水平。我这样做是因为温度和水平的数据放在不同的数据库上，然而问题是，有时似乎来自第一个请求的值似乎没有准时到达并且颜色恢复到其默认状态。如何确保第一个请求将在第一个请求之前完成，同时在处理第二个请求时绘制坦克，不是它存在且其属性正在被更改，它的整个事情每两秒更新一次

function drawTank2(){
      //la primera request se utiliza para cambiar el color del tanque de acuerdo a la temperatura
    var color="#0000ff";

     $.get('SearchDB',{action:'templatest'},function(responseText){     

         var array= new Object;

         array=responseText.split(',');

         temp=array[1];

         temp=parseInt(temp);


         finalcolor = temp*2;

         red=finalcolor;

         blue=255-finalcolor;

         red= Number(red).toString(16);

         blue=Number(blue).toString(16);

         red=red.toString();

         blue=blue.toString();

         color='#'+red+'00'+blue;


     });





//la segunda request grafica el tanque de acuerdo al valor de la variable nivel
       $.get('SearchDB',{action:'latest'},function(responseText){        

         var array= new Object;

         array=responseText.split(',');

         nivel=array[1];

         nivel=parseInt(nivel);


      show=nivel;

      level=-27*nivel/10+290;

      var lienzo = document.getElementById('myProgress');

      var ctx = lienzo.getContext('2d');

      ctx.clearRect(0,0,200,300);

      var my_gradient=ctx.createLinearGradient(0,0,170,0);
      my_gradient.addColorStop(0,"grey");
      my_gradient.addColorStop(1,"yellow");


      ctx.fillStyle=my_gradient;
      //contorno
      ctx.beginPath();
      ctx.lineWidth="4";
      ctx.moveTo(40,90);
      ctx.lineTo(40,220);
      ctx.arc(110,220,70,Math.PI,Math.PI*2,true);
      ctx.lineTo(180,90);
      ctx.arc(110,90,70,0,Math.PI,true);
      ctx.fill();


      //lo llenamos según la variable nivel
      if(nivel<75){
       my_gradient=ctx.createLinearGradient(0,0,100,0);
       my_gradient.addColorStop(0,"black");
       my_gradient.addColorStop(1,"#0000AA");     
      ctx.fillStyle=my_gradient;
      ctx.beginPath();
      ctx.moveTo(40,level);
      ctx.lineTo(40,220);
      ctx.arc(110,220,70,Math.PI,Math.PI*2,true);
      ctx.lineTo(180,level);
      ctx.lineTo(40,level);
      ctx.fill();
      }

      if(nivel<=100 && nivel>75){
          my_gradient=ctx.createLinearGradient(0,0,100,0);
          my_gradient.addColorStop(0,"black");
          my_gradient.addColorStop(1,color);    
          ctx.fillStyle=my_gradient;
          ctx.beginPath();
          ctx.moveTo(40,90);
          ctx.lineTo(40,220);
          ctx.arc(110,220,70,Math.PI,Math.PI*2,true);
          ctx.lineTo(180,90);

          var arco=Math.asin((90-level)/70);    

          ctx.arc(110,90,70,0,Math.PI*2-arco,true); 
          ctx.lineTo(110-70*Math.cos(arco),level);


          ctx.arc(110,90,70,Math.PI,Math.PI+arco);
        //  ctx.lineTo(190,29);*/
          ctx.fill(); 

      }


      //coloración de los tubos
      var grd=ctx.createLinearGradient(0,0,170,0);
      grd.addColorStop(0,"grey");
      grd.addColorStop(1,"white");

      //entrada
      ctx.fillStyle=grd;
      ctx.fillRect(85,10,50,15);
      ctx.fillRect(100,0,20,25);
      //salida
      grd=ctx.createLinearGradient(0,0,300,0);
      grd.addColorStop(0,"black");
      grd.addColorStop(1,"white");
      ctx.fillStyle=grd;
      ctx.fillRect(180,150,15,60);
      ctx.fillRect(195,135,12,90);

      //titulo
      ctx.fillStyle='rgb(0,0,0)';
      ctx.font="18px Arial";
      ctx.fillText("Nivel",140,20);

      //linea vertical de nivel
      ctx.beginPath();
      ctx.moveTo(10,20);
      ctx.lineTo(10,290);
      ctx.stroke();

      //escala


      ctx.font="12px Arial";
     // ctx.fillText("0",12,290);
      //ctx.fillText("100",12,20);

      for(var i=0;i<11;i++){
        ctx.beginPath();
        var y=290-27*i;  
        ctx.moveTo(5,y);
        n=(i*10).toString();
        ctx.fillText(n,16,y);
        ctx.lineTo(15,y);
        ctx.stroke(); 
      }


 });   
}

Answer 1

在第一个请求的回调中实现第二个请求：

$.get('SearchDB', {action: 'templatest'}, function(responseText) { 
    //...
    $.get('SearchDB', {action:'latest'}, function(responseText) { 
        //...
    });
});

Answer 2

$.ajax({
    type: "post",
    url: "ajax/example.php",
    data: 'page='+btn_page,
    success: function(data){
        $.ajax({
            var a=data; //edit data here
            type: "post",
            url: "example.php",
            data: 'page='+a,
            success: function(data){

      });
      error: function(data, errorThrown)
      {
          alert('request failed :'+errorThrown);
      }
});

我会ajax并在其中执行error功能 - 只是为了确保一切正常并检查出错的位置。

javascript两个ajax获取请求一个跟随另一个

2 个答案: