Как получить значение из 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» в поле оповещения, но мне нужно назначить его var texts в javascript.
Я не знаю, как это сделать.
Кто-нибудь знает, как это сделать?

Index.php получил:

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

Помогите мне пожалуйста!

Answer 1

Это делает работу, но вызов Ajax является асинхронной так Javascript сделает вызов и переход к следующей строке. И когда вы пытаетесь использовать переменную во всплывающем окне, вызов еще не закончен, и ваша переменная будет пустой.

Вы должны переместить код после вызова ajax внутри функции успеха, как только вы точно знаете, что вызов ajax успешно завершен.

Вам также не нужен блок документа (готовый), когда вы вызываете свою функцию на 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

Как вы econding результат в файле index.php с помощью json_encode, вы должны расшифровать результат в ответ, как показано ниже:

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