Pereiti prie turinio

Ajax+php+mysql DIV atnaujinimas neperkraunant puslapio

NightLeech

Sukūrė NightLeech
Programuotojų kampas

 Dalintis Sekėjai 0

Rekomenduojami pranešimai

NightLeech

NightLeech 12

Sukurta
Sukurta

Sveiki,

 

Tarkime yra php skriptas, jame yra 2 DIV, o kiekviename DIV'e yra po forma su laukeliais kuriuos užpildžius ir paspaudus mygtuką yra išvedami duomenys. Mano problema yra ta, kad aš noriu jog spaudžiant mygtukus ir išvedant duomenis keistusi ne visas puslapis, o tik atitinkamas DIV'as. Ta dalyką įmanoma padaryti ir grubiai su iframe, tačiau aš noriu pasidaryti normaliai, o tam turbūt tinka AJAX. Bėda ta, kad jo visiškai nemoku, o kiek googlinu nerandu reikiamo sprendimo. Jeigu turite kur nors savo adresyne kokia naudingą nuorodą su problemos sprendimo būdu arba žinote puikų AJAX pradžiamokslį, būčiau dėkingas jeigu pasidalintumėte :)

Nuoroda į pranešimą
Dalintis kituose puslapiuose
Gugiss

Gugiss 704

Atrašyta
Atrašyta (redaguota)

Sakykime tavo formos atrodo taip

<div id="div1">
<form id="form1" method="POST" action="skriptas.php">
	cia visi laukai
</form>
</div>

<div id="div2">
<form id="form2" method="POST" action="skriptas.php">
	cia visi laukai
</form>
</div>

 

Kaip matai forma turi siūsti duomenis į skriptas.php failą (action="skriptas.php"). Todėl reikalingas atskiras php failas kuris apdoroja formos pateiktus duomenis, kreipiasi į duomenų bazę ir duomenis išveda sakykim json formatu.

 

<?php
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("testas") or die (mysql_error());
$zmones = array();
$query = mysql_query("SELECT * FROM zmones");
while($data = mysql_fetch_assoc($query)){
$zmones[] = $data;
}
echo json_encode($zmones);
?>

Paskutinė eilutė skriptas.php faile išveda duomenis tokiu formatu:

[{"id":"1","vardas":"Jonas","amzius":"10"},{"id":"2","vardas":"Petras","amzius":"12"},{"id":"3","vardas":"Maryte","amzius":"7"},{"id":"4","vardas":"Onute","amzius":"99"}]

Tik atreikp dėmesį - skriptas.php failas neturi daugiau nieko rodyti, tik tokį tekstą.

Toliau tame faile kur yra abi formos turi būti nurodyti .js failai tarp <head> tagų.

Kadangi šį kodą parašiau naudodamas jQuery todėl turi būti nuoroda į jQuery biblioteką:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Ir nuoroda į .js failą su ajax veiksmais:

<script src="ajax.js"></script>

Pats ajax.js failas:

$(document).ready(function(){
$('#form1').submit(function(e) {
	form1_function();
	e.preventDefault();
});
$('#form2').submit(function(e) {
	form2_function();
	e.preventDefault();
});
});

function form1_function()
{
$.ajax({
	type: "POST",
	url: "skriptas.php",
	data: $('#form1').serialize(),
	dataType: "json",
	success: function(data){
		$('#div1').html("");	//Kai gaunami duomenys is skriptas.php failo div1 div'as isvalomas (dingsta forma)
		$.each(data, function(item){ 
			$('#div1').append(data[item].vardas); //Rezultatai buna irasomi i div taga
		});
	}
});

}

function form2_function()
{
$.ajax({
	type: "POST",
	url: "skriptas.php",
	data: $('#form2').serialize(),
	dataType: "json",
	success: function(data){
		$('#div2').html("");
		$.each(data, function(item){
		$('#div2').append(data[item].vardas);
	  });
	}
});

}

Jei kas neaišku - klausk.

Redagavo Gugiss
Nuoroda į pranešimą
Dalintis kituose puslapiuose
NightLeech

NightLeech 12

Atrašyta
  • Autorius
Atrašyta (redaguota)

Ačiū Gugiss už sugaišta laiką ir gerą paaiškinimą. Manau šitas pravers ne tik man, bet ir kitiems:)

 

Prie to pačio dar norėčiau pasiteirauti, kaip po mygtuko paspaudymo jį išlaikyti, kad nepasinaikintu pats mygtukas.

Redagavo NightLeech
Nuoroda į pranešimą
Dalintis kituose puslapiuose
Gugiss

Gugiss 704

Atrašyta
Atrašyta (redaguota)

Ačiū Gugiss už sugaišta laiką ir gerą paaiškinimą. Manau šitas pravers ne tik man, bet ir kitiems:)

 

Prie to pačio dar norėčiau pasiteirauti, kaip po mygtuko paspaudymo jį išlaikyti, kad nepasinaikintu pats mygtukas.

Tuomet submit mygtuka iškelk uz formos

<div id="div1">
<form id="form1" method="POST" action="test.php">

</form>
</div>
<input type="submit" id="send">

O ajax.js faile po 

$(document).ready(function(){

įdėk

$('#send').click(function(e) {
$('#form1').submit();
});

Atkreipk dėmesį į $('#send'), $('#form1') ir panašiai jie vadinami selectoriais t.y. jie nusako kuriam html elementui (pagal id) bus atliekami tolesni veiksmai.

Pvz html faile yra:

<div id="test"></div>

O .js faile:

$('#test').click(function(e) {
//Atliekami veiksmai
});

Tai reiškia, kad paspaudus div tag'ą kuriam yra priskirtas "test" id bus vykdoma kazkokia tai funkcija.O jeigu nori priskirti css klasei tam tikrus veiksmus:

<a href='#' class='raudona'>Vienas</a>
<a href='#' class='raudona'>Du</a>
<a href='#' class='raudona'>Trys</a>
$(document).ready(function(){
$('.raudona').click(function(e) {
alert("Labas");
});
});

Paspaudus bet kurią nuorodą (kuriai priskirta klasė "raudona") iššoks alert langelis.

Redagavo Gugiss
Nuoroda į pranešimą
Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Jūs galite rašyti dabar, o registruotis vėliau. Jeigu turite paskyrą, prisijunkite dabar, kad rašytumėte iš savo paskyros.

Svečias
Parašykite atsakymą...

×   Įdėta kaip raiškusis tekstas.   Atkurti formatavimą

  Only 75 emoji are allowed.

×   Nuorodos turinys įdėtas automatiškai.   Rodyti kaip įprastą nuorodą

×   Jūsų anksčiau įrašytas turinys buvo atkurtas.   Išvalyti redaktorių

×   You cannot paste images directly. Upload or insert images from URL.

Įkraunama...
×
 Dalintis
Sekėjai 0
Eiti į temų sąrašą

  • Dabar naršo   0 narių

    Nei vienas registruotas narys šiuo metu nežiūri šio puslapio.

  • Prisijunk prie bendruomenės dabar!

    Uždarbis.lt nariai domisi verslo, IT ir asmeninio tobulėjimo temomis, kartu sprendžia problemas, dalinasi žiniomis ir idėjomis, sutinka būsimus verslo partnerius ir dalyvauja gyvuose susitikimuose.

    Užsiregistruok dabar ir galėsi:

    ✔️ Dalyvauti diskusijose;

    ✔️ Kurti naujas temas;

    ✔️ Rašyti atsakymus;

    ✔️ Vertinti kitų žmonių pranešimus;

    ✔️ Susisiekti su bet kuriuo nariu asmeniškai;

    ✔️ Naudotis tamsia dizaino versija;

    ir dar daugiau.

    Registracija trunka ~30 sek. ir yra visiškai nemokama.

  • Naujausios temos

  • Karštos temos

×
×
  • Pasirinkite naujai kuriamo turinio tipą...