keszites.com

Grafikai tervezés  -  Webdesign  -  Honlapkészítés | Websablon | Wordpress

Grafika Online Színkör Tervező Weblap kód Designer Fontpár Tervező



AJAX és JSON példa

Kategóriák : Javascript

AJAX és JSON példa

A következő példában a szerverről elkérjük az adatokat egy GET típusú kérelemmel, a customers_mysql.php meghívásával, amely mySQL adatbázishoz csatlakozik, majd szövegesen továbbítja az adatokat egy Javascript tömb deklarációnak megfelelően.

xmlhttp.open("GET", url, true);

A tömb adatait úgy írja a kimenetre, vagyis az AJAX kérés eredményét, a customers_mysql.php válaszát, mint egy Javascript deklarációt, a Javascript szintaktikának megfelelően. A tömb deklarációja tartalmazza a Customers mySQL tábla elemeit, a neveket(Name), városokat(City) és a országokat(Country) szöveges megadással.

A következő lépésben a szövegesen megkapott tömb deklarációt átalakítjuk egy valódi tömbbé egy JSON utasítással.

var arr = JSON.parse(response);

Végül végigmegyünk a tömb elemein egy ciklussal és az eredmény sorait egy HTML táblázatba tesszük, amely az out szöveges típusú változóba kerül először, majd az egész eredményt az innerHTML attribútum felhasználásával egy DIV elem által körülhatárolt helyre íratjuk ki a következő utasítással.

document.getElementById("id01").innerHTML = out;

Példa: customers_mysql.php forráskódja.

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");

$result = $conn->query("SELECT CompanyName, City, Country FROM Customers");

$outp = "[";
 while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
    if ($outp != "[") {$outp .= ",";}
    $outp .= '{"Name":"'  . $rs["CompanyName"] . '",';
    $outp .= '"City":"'   . $rs["City"]        . '",';
    $outp .= '"Country":"'. $rs["Country"]     . '"}'; 
}
 $outp .="]";

$conn->close();

echo($outp);
?>

Példa: HTML AJAX kérés és JSON átalakítás, majd az eredmény egy DIV elempár között.

<!DOCTYPE html>
<html>

<head>
<style>
h1 {
    border-bottom: 3px solid #cc9900;
    color: #996600;
    font-size: 30px;
}
table, th , td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
}
table tr:nth-child(odd) {
    background-color: #f1f1f1;
}
table tr:nth-child(even) {
    background-color: #ffffff;
}
</style>
</head>

<body>

<h1>Customers</h1>
<div id="id01"></div>

<script>
 var xmlhttp = new XMLHttpRequest();
 var url = "http://www.w3schools.com/website/customers_mysql.php";

 xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
 }
 xmlhttp.open("GET", url, true);
 xmlhttp.send();

function myFunction(response) {
    var arr = JSON.parse(response);
    var i;
    var out = "<table>";

    for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" +
        arr[i].Name +
        "</td><td>" +
        arr[i].City +
        "</td><td>" +
        arr[i].Country +
        "</td></tr>";
    }
    out += "</table>";
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>
</html>



Weblap kód Designer