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.');';
}

像魅力一样。

让php正确格式化jsonp响应以填充div

1 个答案: