使用PHP來正確格式化jsonp響應來填充div

Question

我花了幾天的時間尋找答案，我越來越接近，但我似乎無法讓它實際工作。

我希望example1.com向example2.com提交請求，其中example2.com處理該請求，而example1.com在div中顯示輸出而不重新加載頁面。

以下是我有：

example1.com（HTML）

<div class="option"> 
<form id="option" action="https://example2.com/process.php" method="get"> 
    <div class="input"> 
    <div id="option"> 
     <div class="block"> 
     <div class="title">Select Option</div> 
     <div class="input-resp"><span> 
      <select name="cmd"> 
       <option name="option" value="online">Online</option> 
       <option name="option" value="offline">Offline </option></span> 
      </div> 
     </div> 
    </div> 
    </div> 
    <div class="submit"> 
    <input type="submit" value="SUBMIT" /> 
    </div> 
</form> 
</div> 
<div class="response"> 
    <div id=response></div> 
</div> 

example1.com（JavaScript）的

$('#option').submit(function() { // catch the form's submit event 
$.ajax({ // create an AJAX call... 
    cache: true, // remove jsonp callback from url 
    dataType: "jsonp", // use jsonp for cross domain requests 
    jsonp: false, // remove jsonp timestamp from url 
    data: $(this).serialize(), // get the form data 
    type: $(this).attr('method'), // GET or POST 
    url: $(this).attr('action'), // the file to call 
    success: function(result) { // on success.. 
     $('#response').html(result); // update the DIV 
    } 
}); 
return false; // cancel original event to prevent form submitting 
}); 

注：爲了測試，我添加了一些設置ajax調用嘗試從URL中刪除回調和時間戳。當我直接導航到頁面時，沒有它們就可以正常工作，但是當我嘗試直接使用修改的URL（使用回調和時間戳）進行導航時失敗。

理想情況下，我寧願不使用添加的設置來刪除回調，但我只是不知道如何使用PHP來處理它以獲得響應。

這是Apache的訪問日誌：

[09/May/2015:14:32:20 -0700] "GET /process.php?cmd=online HTTP/1.1" 200 1110 // Without callback and timestamp 

[09/May/2015:14:31:16 -0700] "GET /process.php?callback=jQuery172026217079092748463_1431207074531&cmd=online&_=1431207076762 HTTP/1.1" 200 4765 // With callback and timestamp 

因此，這裏是我在PHP處理請求。 （同樣，當我直接導航到文件時，這會在瀏覽器中產生一些預期的輸出）。

example2.com/process.php

header('Content-Type: text/javascript; charset=utf8'); 
header('Access-Control-Allow-Origin: *'); 
header('Access-Control-Max-Age: 3628800'); 
header('Access-Control-Allow-Methods: GET, POST'); 

if ($_GET[cmd] == "online") { 
$output = shell_exec('some server side commands'); 
$oparray = preg_split('/[\s,]+/', $output); 
$odd = preg_split('/[\s,]+/', $output); 
$even = preg_split('/[\s,]+/', $output); 
foreach ($oparray as $key => $value) { 
    if (0 == $key % 2) { 
    $even[] = $value; 
    //echo $_GET['callback'] . '('.json_encode($value).')'; //this didn't work 
    $json = json_encode($value); 
    $jsonp_callback = isset($_GET['callback']) ? $_GET['callback'] : null; 
    print $jsonp_callback ? "$jsonp_callback($json)" : $json; 
    } 
    else { 
    $odd[] = $value; 
    // echo $_GET['callback'] . '('.json_encode($value).')'; //this didn't work 
    $json = json_encode($value); 
    $jsonp_callback = isset($_GET['callback']) ? $_GET['callback'] : null; 
    print $jsonp_callback ? "$jsonp_callback($json)" : $json; 
    } 
} 
} 

現在我非常相信，我不能正確儘可能JSONP而言處理這一點，但我似乎無法得到任何有用的錯誤。我嘗試將console.log(error);添加到錯誤設置中，並且在Firebug的控制檯中只顯示202次成功。

error: function(error){ 
     console.log(error); 
    } 

我也試過alert(error);這給了我object Object在彈出。

任何幫助獲得這項工作非常感謝。

Answer 1

以下是我的工作。

example1.com（HTML）（保持不變）

<div class="option"> 
<form id="option" action="https://example2.com/process.php" method="get"> 
    <div class="input"> 
    <div id="option"> 
     <div class="block"> 
     <div class="title">Select Option</div> 
     <div class="input-resp"><span> 
     <select name="cmd"> 
      <option name="option" value="online">Online</option> 
      <option name="option" value="offline">Offline </option></span> 
     </div> 
     </div> 
    </div> 
    </div> 
    <div class="submit"> 
    <input type="submit" value="SUBMIT" /> 
    </div> 
</form> 
</div> 
    <div class="response"> 
    <div id=response></div> 
    </div> 

我加入jsonpCallback設置（這是一個部分我失蹤）。響應字符串應該看起來像peers(["string of data])，其中peers=callback。

這裏是什麼樣子

example1.com（JavaScript）的

$('#peers').submit(function() { // catch the form's submit event 
    $.ajax({ // create an AJAX call... 
    cache: true, // remove jsonp callback from url 
    dataType: "jsonp", // use jsonp for cross domain requests 
    jsonp: "jsonp", // set callback option in url 
    jsonpCallback: "peers", /set callback for response string 
    data: $(this).serialize(), // get the form data 
    type: $(this).attr('method'), // GET or POST 
    url: $(this).attr('action'), // the file to call 
    success: function(result) { // on success.. 
     $('#response').text(result); // update the DIV 
    } 
    }); 
return false; // cancel original event to prevent form submitting 
}); 

由於JSONP修改與回調的URL，我在example2.com/process.php增加了一個檢查爲以及用回調正確地格式化字符串。

下面是它的樣子。

example2.com/process.php

if (isset($_GET[jsonp]) && $_GET[cmd] == "online") { 
    header('Content-Type: text/javascript; charset=utf8'); 
    header('Access-Control-Allow-Origin: *'); 
    header('Access-Control-Max-Age: 3628800'); 
    header('Access-Control-Allow-Methods: GET, POST, OPTION'); 
    $output = shell_exec('some server side commands'); 
    $callback = $_GET[jsonp]; 
    $array = array($output); 
    $json = json_encode($array); 
    echo $callback.'('.$json.');'; 
} 

就像一個魅力。