[[oktatas:web:javascript:javascript_ajax|< AJAX]] ====== KekBt AJAX példa ====== * **Szerző:** Sallai András * Copyright (c) 2021, Sallai András * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]] * Web: https://szit.hu ===== Adatbázis ===== * dolgozok { az, nev, igszam, telepules, vegzettseg, belepes, beosztasAz } * beosztasok { az, nev } ===== Dolgozó lekérése ===== ==== Projekt könyvtárszerkezet ====


kekbt/
  |-database/
  |-src/
  |  |-php/
  |  |  |-includes/
  |  |  |   |-config.php
  |  |  |   |-database.php
  |  |  |   `-mariadb.php
  |  |  `-lekerdolgozok.php
  |  |-dolgozolista.html
  |  |-dolgozolista.js
  |  `-index.html
  `-test/

==== PHP ==== Adatok lekérése és megjelenítése adatbázisban.








fetch_assoc(); 
		$datar[] = $row);
	closeDb($conn);
	return $datar;
}






==== HTML ====






	
	


    Kék Bt.
    
        Dolgozolista
    










	
	


	Dolgozolista
	
	
	




==== JavaScript ====


'use strict';

function lekerdolgozok() {
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'text';

    xhr.open("POST", "php/lekerdolgozok.php", true);
    xhr.send();

    xhr.onload = function() {
        if(xhr.readyState === xhr.DONE) {
            if(xhr.status === 200) {
				feltolt(xhr.responseText);
            }
        }
    }	
}

function feltolt(data_r) {
	let lista = document.getElementById('lista');
	let data = JSON.parse(data_r);
	for(let i=0; i
				${data[i].nev}
				${data[i].telepules}
					
		`;
		
	}
}


lekerdolgozok();


===== Dolgozó beszúrása =====
==== Projekt könyvtárszerkezet ====


kekbt/
  |-database/
  |-src/
  |  |-js/
  |  |  |-dolgozohozzaad.js
  |  |  `-dolgozolista.js
  |  |-php/
  |  |  |-includes/
  |  |  |   |-config.php
  |  |  |   |-database.php
  |  |  |   `-mariadb.php
  |  |  |-hozzaaddolgozo.php
  |  |  |-lekerbeosztasok.php
  |  |  `-lekerdolgozok.php
  |  |-dolgozohozzaad.html
  |  |-dolgozolista.html
  |  `-index.html
  `-test/


==== PHP ====

Kiegészítettük a database.php-t:


fetch_assoc(); 
		$datar[] = $row);
	closeDb($conn);
	return $datar;
}

function lekerBeosztasok() {
	$conn = connectDb();
	$sql = "
	select * from beosztasok
	";
	$res = mysqli_query($conn, $sql);
	if(!$res) {
		error_log('Hiba! A lekérdezés sikertelen!' .
		$sql);
		exit();
	}
	for( $datar = array(); 
		$row = $res->fetch_assoc(); 
		$datar[] = $row);
	closeDb($conn);
	return $datar;
}

function beszurDolgozo($dolgozo) {
	$conn = connectDb();
	$sql = "
	insert into dolgozok
	(nev, igszam, telepules, vegzettseg, belepes, beosztasAz)
	values
	(?,?,?,?,?, ?)
	";

	if ($stmt = mysqli_prepare($conn, $sql)) {		
		mysqli_stmt_bind_param($stmt, "sssssd", 
			$dolgozo->nev, 
			$dolgozo->igszam, 
			$dolgozo->telepules, 
			$dolgozo->vegzettseg,
			$dolgozo->belepes,
			$dolgozo->beosztas
			);
		mysqli_stmt_execute($stmt);	 
		error_log(mysqli_stmt_error($stmt));
		mysqli_stmt_close($stmt);
		echo "Beszúrás vége";
	} else {
		echo "Hiba a beszúrás során!";
	}
	closeDb($conn);
	error_log($dolgozo->beosztas);
}




Lett két új PHP fájl:








==== HTML ====





    
    


    Dolgozó hozzáadása
    
    
        
            Dolgozó adatai
        
            Név
            


            Igazolványszám
            


            Település
            


            Végzettség
            


            Belépés
            
        
            
            Beosztás 
            
        
        
        
    

    






==== JavaScript ====



const hozzaadGomb = document.getElementById('hozzaadGomb');
hozzaadGomb.addEventListener('click', event => {
	let dolgozo = osszeallitDolgozo();
	hozzaadDolgozo(dolgozo);
});

function osszeallitDolgozo() {
	let dolgozo = new Object();
	dolgozo.nev = document.getElementById('nev').value;
	dolgozo.igszam = document.getElementById('igszam').value;
	dolgozo.telepules = document.getElementById('telepules').value;
	dolgozo.vegzettseg = document.getElementById('vegzettseg').value;
	dolgozo.belepes = document.getElementById('belepes').value;
	dolgozo.beosztas = document.getElementById('beosztas').value;
	return dolgozo;
}

function hozzaadDolgozo(dolgozo) {
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'text'; 
    xhr.open("POST", "../php/hozzaaddolgozo.php", true);
    xhr.send(JSON.stringify(dolgozo)); 
    xhr.onload = function() {
        if(xhr.readyState === xhr.DONE) {
            if(xhr.status === 200) {
				console.log(xhr.responseText);
            }
        }
    }	
}

function lekerBeosztasok() {
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'text'; 
    xhr.open("POST", "../php/lekerbeosztasok.php", true);
    xhr.send(); 
    xhr.onload = function() {
        if(xhr.readyState === xhr.DONE) {
            if(xhr.status === 200) {
				feltoltBeosztasok(xhr.responseText);
            }
        }
    }		
}

function feltoltBeosztasok(beosztasok) {
	console.log(beosztasok);
	
	let beosztasokSelect = document.getElementById('beosztas');
	let data = JSON.parse(beosztasok);
	for(let i=0; i
			${data[i].nev}
					
		`;
	}
}

lekerBeosztasok();