使用AJAX發佈到PHP - 獲取值返回到原始腳本

Question

對不起，標題戈爾 - 我什至不知道我真的問。

我有一個Jquery腳本，檢查邊框顏色。如果顏色匹配，那麼它會將它保存到一個數組並將其發送給PHP腳本。

  var fields={}; 
      fields[0]=$('.block0').css("border-color"); 
      var divs={}; 
      divs[0]=$('.block0 h2').html(); 
      //The above are just examples sense the code is a little lengthy 
      var c=0; 
      var i=0; 
      var elements={}; 
      while (c !== 24) 
      { 
       if (fields[c] == "rgb(129, 222, 252)") 
       { 
        elements[i]=divs[c]; 
        alert (elements[i]); 
        i++; 
       } 
       c++; 
      } 
      $.ajax({ 
       url: "process.php", 
       data: elements, 
       type: "POST", 
      }); 

這些都位於「hello.php」文件中。

完成後，如您所見，它會將變量傳遞給名爲「process.php」的PHP腳本。在這個腳本中，會發生一些事情，比如從MYSQL數據庫，配置文件等獲取更多信息，然後我的GOAL將這些額外的信息傳回到「hello.php」文件。

我之所以這樣做是因爲我試圖避免任何重定向或刷新。我不完全確定我是否以正確的方式進行。 無論如何，我試圖從「process.php」向「hello.php」傳遞額外信息時遇到了一些小問題。任何和所有的建議非常感謝！

編輯：下面是更多一些，每個請求：

hello.php

var openIt=function() 
     { 
      var fields={}; 
       fields[0]=$('.block0').css("border-color"); 
       fields[1]=$('.block1').css("border-color"); 
       fields[2]=$('.block2').css("border-color"); 
       fields[3]=$('.block3').css("border-color"); 
       fields[4]=$('.block4').css("border-color"); 
       fields[5]=$('.block5').css("border-color"); 
       fields[6]=$('.block6').css("border-color"); 
       fields[7]=$('.block7').css("border-color"); 
       fields[8]=$('.mmod2').css("border-color"); 
       fields[9]=$('.mmod3').css("border-color"); 
       fields[10]=$('.mmod4').css("border-color"); 
       fields[11]=$('.mmod5').css("border-color"); 
       fields[12]=$('.mmod6').css("border-color"); 
       fields[13]=$('.mmod7').css("border-color"); 
       fields[14]=$('.mmod8').css("border-color"); 
       fields[15]=$('.mmod9').css("border-color"); 
       fields[16]=$('.ttemp2').css("border-color"); 
       fields[17]=$('.ttemp3').css("border-color"); 
       fields[18]=$('.ttemp4').css("border-color"); 
       fields[19]=$('.ttemp5').css("border-color"); 
       fields[20]=$('.ttemp6').css("border-color"); 
       fields[21]=$('.ttemp7').css("border-color"); 
       fields[22]=$('.ttemp8').css("border-color"); 
       fields[23]=$('.ttemp9').css("border-color"); 
      var divs={}; 
       divs[0]=$('.block0 h2').html(); 
       divs[1]=$('.block1 h2').html(); 
       divs[2]=$('.block2 h2').html(); 
       divs[3]=$('.block3 h2').html(); 
       divs[4]=$('.block4 h2').html(); 
       divs[5]=$('.block5 h2').html(); 
       divs[6]=$('.block6 h2').html(); 
       divs[7]=$('.block7 h2').html(); 
       divs[8]=$('.mmod2 h2').html(); 
       divs[9]=$('.mmod3 h2').html(); 
       divs[10]=$('.mmod4 h2').html(); 
       divs[11]=$('.mmod5 h2').html(); 
       divs[12]=$('.mmod6 h2').html(); 
       divs[13]=$('.mmod7 h2').html(); 
       divs[14]=$('.mmod8 h2').html(); 
       divs[15]=$('.mmod9 h2').html(); 
       divs[16]=$('.ttemp2 h2').html(); 
       divs[17]=$('.ttemp3 h2').html(); 
       divs[18]=$('.ttemp4 h2').html(); 
       divs[19]=$('.ttemp5 h2').html(); 
       divs[20]=$('.ttemp6 h2').html(); 
       divs[21]=$('.ttemp7 h2').html(); 
       divs[22]=$('.ttemp8 h2').html(); 
       divs[23]=$('.ttemp9 h2').html(); 


      var c=0; 
      var i=0; 
      var elements={}; 
      while (c !== 24) 
      { 
       if (fields[c] == "rgb(129, 222, 252)") 
       { 
        elements[i]=divs[c]; 
        alert (elements[i]); 
        i++; 
       } 
       c++; 
      } 
      $.ajax({ 
       url: "process.php", 
       data: elements, 
       type: "POST", 
      }); 

     } 

這是醜陋的，我知道....

這裏實際上是hello.php的另一個片段扔在標題和東西：

<?php 
        $sql = "SELECT * FROM case_info"; 
        $result = mysqli_query($conn, $sql); 
        if (mysqli_num_rows($result) > 0) 
        { 
         $row = array(); 
         while($row[] = mysqli_fetch_array($result)); 
         $max=count ($row); 
         $c=0; 
         while (($max-1) <> $c) 
         { 
          echo '<script> 
            var block'.$c.'=function(){ 
             $(".block'.$c.'").css("border",".15vw solid #81DEFC"); 

            } 
            </script>'; 
          echo '<div onClick="block'.$c.'()" class="block'.$c.'"> 
             <div class="headerbl"><h2>'.$row[$c]["id"].'</h2></div> 
             <p>'.$row[$c]["client"].'</p> 
            </div>'; 
          $c++; 
         } 
        } 

       ?> 

然後最後，會有一個新的<div>當用戶打開其中一個「塊」時將包含信息。基本上，用戶可以：

1. 點擊「<div class="block0">
2. 單擊打開
3. 新的覆蓋型格將包含有關的更具體的信息‘塊’。他們點擊你可以把它像一個」讀更多」類型的場景

Answer 1

使用Ajax回調函數

$.ajax({ 
     url: 'process.php', 
     type: 'POST', 
     data: data, 
     contentType: false, 
     cache: false, 
     processData: false, 
     success: function(data) { 
      var obj = $.parseJSON(data); 
      alert(obj.result);     
     } 
}); 

使用JSON格式的數據從你的PHP腳本變量傳遞，在你的PHP腳本應該是這樣的：

$jsonArray = array(); 
$jsonArray['result'] = 'result'; 
$jsonArray['data'] = 'data'; 
echo json_encode($jsonArray); 

然後解析JSON數據在使用parseJSON（）的JavaScript中，要使用變量，請使用obj.result或obj.data。

Answer 2

JQuery的AJAX有一個功能，會做什麼，你只需要

成功（）函數：

如果請求成功，將被調用的函數。該函數傳遞三個參數：從服務器返回的數據，根據dataType參數或dataFilter回調函數格式化（如果指定）;描述狀態的字符串;和jqXHR（在jQuery 1.4.x，XMLHttpRequest）對象中。

你可以做你的Ajax這樣的：

$.ajax({ 
      url: "process.php", 
      data: elements, 
      type: "POST", 
      success: function(data) { 

       // data is a variable coming from process.php as return value 

      } 
     }); 

運氣最好的哥們！