各位好!此問題昨日有在FB(JS.tw)上發言,但目前還未解決,所以上版求解,謝謝
Describe(問題描述):
使用第三方套件(library)
Github: https://github.com/TedyL/wheel-of-fortune
依照文檔範例,將server端資料傳回前端(ajax回來的資料)
但在callback裡 一直抓不到回傳JSON(result)
也嘗試使用各種方法 callback function/ .done()
能想到的都用過了,但一直錯誤
不是很懂哪裡做錯了,能想過的都嘗試了還是不行QQ
還請各位大神們好心教教我,十分謝謝!
(0818/1146--更新問題)
先感激邦友大大們的回覆,因為有些微進度所以趕快上來修正發問
問題還是一樣,是抓不到回傳JSON(哭出來
但現在有辦法進到callback中了(原本進不去)!!!
更新後同問題 result Data抓不到, 只有undefined
view畫面(console)
html/JS(覺得寫在一起比較容易看)
<div class="spin-container">
  <div class="spinflapper"></div>
  <!--使用套件的地方-->
  <div class="spinit" id="spinneratlas" style="background-image: url('images/gameboard.png')">
    <div class="" data-spinit-id="a1" data-spinit-start="0" data-spinit-end="45"></div>
    <div class="" data-spinit-id="b2" data-spinit-start="45" data-spinit-end="90"></div>
    <div class="" data-spinit-id="c3" data-spinit-start="90" data-spinit-end="135"></div>
    <div class="" data-spinit-id="d4" data-spinit-start="135" data-spinit-end="180"></div>
    <div class="" data-spinit-id="e5" data-spinit-start="180" data-spinit-end="225"></div>
    <div class="" data-spinit-id="f6" data-spinit-start="225" data-spinit-end="270"></div>
    <div class="" data-spinit-id="g7" data-spinit-start="270" data-spinit-end="315"></div>
    <div class="" data-spinit-id="h8" data-spinit-start="315" data-spinit-end="360"></div>
  </div>
  <button class="btn-go" id="dolo" type="button"> </button>
</div>
<script src="js/plugin/transit.js?t=202108121613"></script>
<script src="js/plugin/spinit.js?t=202108121613"></script>
<script>
$(document).ready(function(){
   console.log('OK1');
   
  // 使用試套件設定(原本問題)
  // $("#spinneratlas").spinit({
  //  startDegree: -7,
  //  clockwise: true,
  //  installUrl: null,           // return result as json
  //  luckyUrl: "/luckyDraw.php", // spin lucky draw
  //  keyUrl:  null,              // encryption key url
  // });
  
  // 使用試套件設定(更新問題後)
  $("#spinneratlas").spinit({
    startDegree: 0,
    clockwise: true,
    installUrl: null, // return result as json
    luckyUrl: "/luckyDraw.php", // spin lucky draw
    keyUrl:  "/luckyDraw2.php", // encryption key url
    encryptionKey: "123"  //要增加這個設定
  });
  // 事件觸發
  $(document).on("click", "#dolo", function(){
    console.log('OK2');
    $("#spinneratlas").spinit("serverSpin", function(data){
      console.log(data);  // 錯誤的地方
      console.log(JSON.stringify(data));
      console.log('OK3');
      alert('doen');
      // 但result就是 undefined
      // console.log('OK3')與 alert('doen') 都可以執行
    });
    console.log('OK4');
  });
  
});
</script>
回傳PHP /luckyDraw.php
(回傳暫時寫死的,只是想先試試能不能拿到資料)
// success不能拿掉, 不然連run都不行
$array = ['success' => '1', 'id'=> 'e5'];
// header 有拿掉跟沒拿掉,都使用過, 都有成功回傳JSON
// header('Content-type: application/json');
echo json_encode($array);
(更新)
回傳PHP /luckyDraw2.php
$array = ['key' => '123'];
header('Content-type: application/json');
echo json_encode($array);
Network圖片
1.luckyDraw.php

2.luckyDraw.php

程式(hackmd)
https://hackmd.io/@llPhtr2DQ6-tyvxzAL3Ekg/BkQ7LwFxF
昨日社團發問(原問題)
https://www.facebook.com/groups/javascript.tw/permalink/3747288492039128/
試試
你應該在spin裡設定一個callback
  $("#spinneratlas").spinit({
    startDegree: 0,
    clockwise: true,
    installUrl: null, // return result as json
    luckyUrl: "/luckyDraw.php", // spin lucky draw
    keyUrl:  "/luckyDraw2.php", // encryption key url
    callback: cb_function,
    encryptionKey: "123"  //要增加這個設定
  });
相對的,在js做個function,把spinner裡的值存在一個廣域變數(我假設p)中
function cb_function(val){
    p=val;
}
在你的js的ready裡最上頭加一行
$(document).ready(function(){
   val p = 0 ;
   console.log('OK1');
   // 以下10001字全省略..   
如此這般,在dolo被按下去時,你才有辦法拿到值
  $(document).on("click", "#dolo", function(){
    console.log('OK2');
    $("#spinneratlas").spinit("serverSpin", function(data){
      console.log(p);  // 錯誤的地方....data換成p
      //但我疑惑,為什麼不直接對$("#spinneratlas")取val()?  
      console.log(JSON.stringify(data));
      console.log('OK3');
      alert('doen');
      // 但result就是 undefined
      // console.log('OK3')與 alert('doen') 都可以執行
    });
    console.log('OK4');
  });