PHPファイルから値を取得する方法Jquery？

Question

私は今このjavascript/jqueryコードを持っています：
私は私のPHPファイルから値を得ることができますが、警告ボックスにしか表示できません。
この値（結果）を「テキスト」に設定して、ポップアップに表示されるようにしたいと思います。

var script = document.createElement('script'); 
 
script.src = 'http://code.jquery.com/jquery-1.11.0.min.js'; // jquery 
 
script.type = 'text/javascript'; 
 
document.getElementsByTagName('head')[0].appendChild(script); 
 
window.onload = addElement; 
 

 

 
function addElement() { 
 
\t // create a new div element 
 
\t // and give it popup content 
 
\t var newDiv = document.createElement("div"); 
 
\t var texts; 
 
\t 
 

 
\t ///////////////////////////////////////////////////////////////////////////////////////// 
 
\t $(document).ready(function() { 
 
       $.ajax({ 
 
        url:"index.php", 
 
\t \t \t \t \t 
 
        success:function(result){ 
 
         texts = result; // does not work 
 
        } 
 
       });    
 
      }); 
 
\t ///////////////////////////////////////////////////////////////////////////////////////// 
 
\t 
 
\t 
 
\t 
 
\t newDiv.innerHTML += '<div id="popup" style=" position: fixed;top: 15%;width: 800px;height: 200px;margin: auto;z-index: 99999;display: block;left:25%;background-color: #fff; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 1px 6px 4px #000; overflow: hidden; padding: 10px;"><div class="popup_body" style=" height: 160px;">' + texts + '</div><button style="padding: 10px;" class="close_button"onClick="closePopup()">Sluiten</button><button style="padding: 10px;" class="close_button"onClick="tostoring()">Meer Informatie</button></div>'; 
 

 
\t // Add The Background cover 
 
\t var BG = document.createElement("div"); 
 
\t BG.style.width = '100%'; 
 
\t BG.style.height = '100%'; 
 
\t BG.style.background = 'black'; 
 
\t BG.style.position = 'fixed'; 
 
\t BG.style.top = '0'; 
 
\t BG.style.left = '0'; 
 
\t BG.style.opacity = '0.7'; 
 
\t BG.style.zIndex = '99900'; 
 
\t BG.style.display = 'none'; 
 
\t BG.setAttribute("id", "bgcover"); 
 
    
 
\t // add the newly created elements and its content into the DOM 
 
\t document.body.appendChild(BG); 
 
\t document.body.insertBefore(newDiv, BG); 
 
\t // open popup onload 
 
\t 
 
\t 
 
\t openPopup(); 
 
} 
 

 
function openPopup() { 
 
\t var el = document.getElementById('popup'); 
 
\t var BG = document.getElementById('bgcover'); 
 
\t el.style.display = 'block'; 
 
\t BG.style.display = 'block'; 
 
\t 
 
\t 
 
} 
 

 
function tostoring() { 
 
\t window.location.href = 'http://localhost/Sms%20management%20systeem/testing/storing.php'; 
 
} 
 

 
function closePopup() { 
 
\t var el = document.getElementById('popup'); 
 
\t var BG = document.getElementById('bgcover'); 
 
\t el.style.display = 'none'; 
 
\t BG.style.display = 'none'; 
 
}

results値として 'XXXX' を得ました。
私は 'xxxx'を既にアラートボックスに入れていますが、それをjavascriptのvar textsに割り当てる必要があります。
これを行う方法がわかりません。
誰でもこれを行う方法を知っていますか？

のindex.phpを得た：

<?php 
    $var = "xxxx"; 
    echo json_encode($var); 
?> 

は私を助けてください！

Answer 1

それは作業を行いますが、AJAX呼び出しが非同期であるので、Javascriptを行います呼び出しを呼び出して次の行に移動します。また、ポップアップボックスで変数を使用しようとすると、呼び出しはまだ完了せず、変数は空になります。

ajax呼び出しの後で、ajax呼び出しが正常に終了したことを知っているだけで、success関数内にコードを移動する必要があります。

window.onloadで関数を呼び出すときにドキュメント（レディ）ブロックは必要なく、DOMはすでに準備が整っています。

あなたは/ cssを外部のcssファイルに移動する必要があります。これは、保守や共有がずっと簡単なことです。

function addElement() { 
    // create a new div element 
    // and give it popup content 
    var newDiv = document.createElement("div"); 
    var texts; 

    $(document).ready(function() { 
      $.ajax({ 
       url:"index.php", 

       success:function(result){ 
        texts = result; // does not work 

        newDiv.innerHTML += '<div id="popup"><div class="popup_body">' + texts + '</div><button class="close_button"onClick="closePopup()">Sluiten</button><button class="close_button"onClick="tostoring()">Meer Informatie</button></div>'; 

        // Move all the css to an external css file 

        // add the newly created elements and its content into the DOM 
        document.body.appendChild(BG); 
        document.body.insertBefore(newDiv, BG); 
        // open popup onload 
        openPopup(); 
        } 
      });    
    }); 
} 

Answer 2

あなたがjson_encodeを使用してのindex.phpファイルに結果をecondingされているので、あなたは以下のように反応して、結果をデコードする必要があります。

$.ajax({ 
    url:"index.php", 
    success:function(result){ 
    var obj = $.parseJSON(result); 
    console.log(obj); 
    } 
});