如何从PHP文件Jquery获取价值？

Question

I now have this javascript/jquery code:
I can get the value from my php file but i can only show it in a alert box.
I like to have this value (result) set into "texts" so it will show in my popup.

 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() { // 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" 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>'; // Add The Background cover var BG = document.createElement("div"); BG.style.width = '100%'; BG.style.height = '100%'; BG.style.background = 'black'; BG.style.position = 'fixed'; BG.style.top = '0'; BG.style.left = '0'; BG.style.opacity = '0.7'; BG.style.zIndex = '99900'; BG.style.display = 'none'; BG.setAttribute("id", "bgcover"); // add the newly created elements and its content into the DOM document.body.appendChild(BG); document.body.insertBefore(newDiv, BG); // open popup onload openPopup(); } function openPopup() { var el = document.getElementById('popup'); var BG = document.getElementById('bgcover'); el.style.display = 'block'; BG.style.display = 'block'; } function tostoring() { window.location.href = 'http://localhost/Sms%20management%20systeem/testing/storing.php'; } function closePopup() { var el = document.getElementById('popup'); var BG = document.getElementById('bgcover'); el.style.display = 'none'; BG.style.display = 'none'; } 

results got 'xxxx' as value.
I got 'xxxx' into a alert box already, but i need to assign it to var texts in javascript.
I don't know how to do this.
Anyone know how to do this?

Index.php got:

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

Help me please!

Answer 1

It does work, but the ajax call is asynchronous so javascript will make the call and move on to the next line. And when you try to use the variable in your pop-up box, the call has not yet finished and your variable will be empty.

You should move the code after the ajax call to inside the success function as only there you know for sure that the ajax call has finished successfully.

You also don't need the document(ready) block as you are calling your function on window.onload so the DOM will already be ready.

You should / could also move the css to an external css file as that will be a lot easier to maintain and share.

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

As you are econding the result in index.php file using json_encode , you have to decode the result in response as below:

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