Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:jquery:jquery_adatbazis

< jQuery

jQuery adatbázis

Adatok kérése php scripttől

Egyetlen adat átvitele

A kuld.php egyetlen szót küld:

kuld.php
echo "szilva";

A jQuery-ben a kuld.php scripttől kérjük az adatot:

script.js
$.post("kuld.php", function(data){
    alert(data);
}, "text");

Tömb átvitele

Ha több adatról van szó, érdemes átalakítani json formátumba. A következő példában json formában küljük és vesszük át az adatokat.

A kuld.php egy tömböt küld:

kuld.php
$a = array("alma", "körte", "barack", "szilva");
echo json_encode($a);

A jQuery-ben lekérjük az adatokat kuld.php scripttől:

script.js
$.post("kuld.php", function(data){
    alert(data);
}, "json");

Különböző adatok átvitele

kuld.php
$a = array(
    'nev' => "Nagy János",
    'kor' => "28",
    'fiz' => "1350000"
);
script.js
$.post("kuld.php", function(data){
    alert(data.nev);
}, "json");

Objektum átvitele

Egy objektum átküldése kuld.php-vel:

kuld.php
class Dolgozo {
    public $nev = "";
    public $kor = "";
    public $fiz = "";
}
 
$dolgozo = new Dolgozo();
 
$dolgozo->nev = "Nagy János";
$dolgozo->kor = 28;
$dolgozo->fiz = 1350000;
 
echo json_encode($dolgozo);
script.js
$.post("kuld.php", function(data){
    alert(data.nev);
}, "json");

Hibakövetés

script.js
$.post("kuld.php", function(data){
    alert(data.nev);
}, "json")
.fail(function(){
    alert("Hiba a lekérés során");
});

Még több lehetőség

script.js
        $.get("kuld.php", function(data){
                alert(data.nev);
        }, "json")
        .done(function() {
                alert("Siker");
        })
        .fail(function() {
                alert("Hiba a lekérés során");
        })
        .always(function() {
                alert("Ezt mindenképpen végrehajtjuk");
        });

Adatok küldése PHP scriptnek

script.js
$.post("fogad.php", {
    nev: "Nagy János",
    kor: "28",
    fiz: "1350000"
});
fogad.php
<?php
 
$nev = $_POST['nev'];
$kor = $_POST['kor'];
$fiz = $_POST['fiz'];
 
$f = fopen("adat.txt", "a");
fputs($f, $nev.":");
fputs($f, $kor.":");
fputs($f, $fiz."\n");
 
fclose($f);

Adatbázislekérés

Weblap

Lehetséges weblap:

<input type="text" id="id">
<button type="submit" id="getEmployee">Lekér</button>
<div class="employee-content">
	<h4>Dolgozói adatok</h4>
	<p>Név: <span id="name"></span></p>
	<p>Település: <span id="station"></span></p>
	<p>Fizetés: <span id="pay"></span></p>
</div>

jquery

script.js
$('#getEmployee').on('click', function() {
    var employeeId = $('#employedId').val();
    $.ajax({
        type: 'POST',
        url: 'getEmployee.php',
        dataType: "json",
        data: {
            employeeId: employeeId
        },
        success: function(data) {
            if (data.status == 'ok') {
                $('#name').text(data.result.name);
                $('#station').text(data.result.station);
                $('#pay').text(data.result.pay);
                $('.employee-content').slideDown();
            } else {
                $('.employee-content').slideUp();
                alert("Nincs ilyen dolgozó");
            }
        }
    });
});

PHP

getEmployee.php
<?php
if(!empty($_POST['id'])) {
	$data = array();
 
	$con = new mysqli($host, $user, $pass $dbname);
	if($con->connect_error) {
		die("Az adatbázishoz nem lehet kapcsolódni: " . $con->connect_error);
	}
	$sql = "select * from employees where id = {$_POST['id']}";
	$res = $con->query($sql);
	if($res->num_rows > 0) {
		$userData = $res->fetch_assoc();
		$data['status'] = 'ok';
		$data['result'] = $userData;
	}else {
		$data['status'] = 'error';
		$data['result'] = '';
	}
	echo json_encode($data);
}

Adatok szűrése

<select id="valasztas">
	<option value="1">Egy</option>
	<option value="2">Kettő</option>
	<option value="3">Három</option>
	<option value="4">Négy</option>
	<option value="5">Öt</option>
	<option value="6">Hat</option>
</select>

Ha szeretnénk megkapni a választott értéket, 1, 2, 3, stb, akkor így tehetjük meg:

$("#valasztas").val();

Ha szöveget szeretném megkapni, „egy”, „kettő” stb., akkor:

$("#valasztas option:selected").text();

Források

oktatas/web/jquery/jquery_adatbazis.txt · Utolsó módosítás: 2019/08/22 20:22 szerkesztette: admin