No se puede obtener valor de la respuesta json. Aquí está mi html.
índice html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h1>The XMLHttpRequest Object</h1> <button type="button" onclick="loadDoc()">Request data</button> <br> <br> <p id="demo"></p> <p id="demo1"></p> <script> function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML ="JSON = "+this.responseText; document.getElementById("demo1").innerHTML = "first name = "+this.responseText.fname; } }; xhttp.open("POST", "/test.php", true); xhttp.setRequestHeader("Content-type", "application/json"); xhttp.send(); } </script> </body> </html>y prueba.php
<?php echo '{"fname":"sumith","lname":"emmadi"}' ?>cuando hago clic en el botón de solicitud de datos, enviará una solicitud POST a "/test.php" y obtendrá una respuesta como
{"fname":"sumith","lname":"emmadi"}Quiero obtener el valor de fname pero se muestra indefinido
Debe analizar el JSON en un objeto antes de poder extraer los valores de propiedad específicos. p.ej
if (this.readyState == 4 && this.status == 200) { var data = JSON.parse(responseText); document.getElementById("demo1").innerHTML = "first name = "+ data.fname; }Obtendrá una respuesta dentro xhttp.responseText o this.responseText . Y para obtener fname y lname, primero analice el resultado usando JSON.parse y obtenga fname , lname usando la asignación de Destructuring
const { fname, lname } = JSON.parse(xhttp.responseText); // To show in DOM document.getElementById("demo").innerHTML ="JSON : <pre> " + xhttp.responseText + "</pre>"; document.getElementById("demo1").innerHTML = "first name = " + fname;