[Løst] Hente data returnert med ajax

Occi · 11. mai 2011

Hei

Jeg har lett en stund nå, og finner ikke noe som passer meg, så lager derfor en tråd på emnet.

Jeg har en registreringsside hvor man skal skrive inn postnr, og jeg har da laget en javascript function som bruker ajax til å be et php-script til å sjekke om postnr finnes i databasen eller ei. Men jeg klarer ikke å finne en metode som lar ajax enten ta imot data og dermed lagre en found=true/false eller å force en error: function()-trigger til ajaxen.

HTML-biten er det ikke noe galt med, så poster dermed ikke denne.

PHP-klassen SjekkPostNr:

<?php
class SjekkPostNr
{
   	private $pnr;
   	private $db_connect, $db, $query, $result, $rows;

   	public function __construct($pnr)
   	{
       	$this->pnr = $pnr;
       	$this->db_connect = new DB_Connect();
       	$this->db = $this->db_connect->getDB();
   	}

   	public function sjekkPostNr()
   	{
       	if($this->db != null)
       	{
           	$this->query = sprintf("SELECT Postnr, Poststed FROM WS_Post
                                   	WHERE Postnr = '%s'",
                       	$this->db->real_escape_string($this->pnr));

           	$this->result = $this->db->query($this->query);

           	if($this->result)
           	{
               	$this->rows = $this->result->num_rows;

               	if($this->rows > 0)
               	{
                   	return true;
               	}
               	else
               	{
                   	return false;
               	}
           	}
           	else
           	{
               	return false;
           	}
       	}
       	else
       	{
           	return false;
       	}
   	}
}
?>

Selve PHP-filen som lager SjekkPostNr-objekt

<?php
require("classes/sjekkPostNr.php");

$pnr = $_POST['pnr'];

$sjekkPostNr = new SjekkPostNr($pnr);

$sjekkPostNr->sjekkPostNr();
?>

Javascript-funksjonen som er en del av en større funksjon (som er urelevant)

function sjekkPostnr(pnrInput)
{
var found;

if(pnrInput != null)
{
   	$.ajax({
       	url: 'php/sjekkPostNr_do.php',
       	type: 'POST',
       	data: ({
           	pnr: pnrInput
       	}),
       	success: function() {
           	// set var found to true/false depending on php-echo/return
       	}
   	});
}
}

Slik jeg ser det har jeg to alternativer; enten ved å force at error: function() blir triggered (men det har jeg ikke klart å få til, tips tas gjerne imot), eller så må jeg klare å hente dataene fra scriptet. Jeg har fått høre at jeg kan bruke json, men har null aning på hvordan dette legges til eller fungerer. Om det ikke er vanskelig kan jeg sikkert lære meg det.

Om noen har forslag til hvordan jeg burde endre strukturen så er jeg åpen for det, men vil altså holde det objektorientert på PHP-biten.

Endret 11. mai 2011 av Occi

MikkelRev · 11. mai 2011

JSON trenger du vel bare hvis du skal returnere flere verdier (i en array) fra ajax-php'en. Jeg pleier å gjøre det slik:

       $.ajax({
               url: 'php/sjekkPostNr_do.php',
               type: 'get',
               data: 'pnrInput=' + pnrInput,
               success: function(data) {
                  alert(data);
               }

Occi · 11. mai 2011

Det var det jeg også forstod det som MikkelRev, men var noen som mente at Javascript kunne bli forvirret da den ikke kan ta imot rene variable, men jeg trenger jo i prakis egentlig kun en tekst for å indikere. Kan være 1 eller ingenting f. eks, har nada å si.

Når det gjelder function(data) så har jeg ikke skjønt den biten helt - er det slik at man da sender med data som er i forrige felt, fordi det har jeg ikke trengt å gjøre tidligere når jeg har sendt data.

Er alert(data) altså dataen som er returnert? Om jeg tar echo "true" ved success f. eks så vil alert(data) gi "true"?

MikkelRev · 11. mai 2011

Prøv dette:


       var qsdata='pnrInput=' + pnrInput + '&navn=Occi';  //querystringen
       $.ajax({
               url: 'test.php',
               type: 'get',
               data: qsdata,
               success: function(data) {
                  alert(data); //alert'er ut det som test.php echo'er.
               }
});

I test.php:

if(1)
echo "yes sir".$_GET["navn"];
else
echo "fail!".$_GET["navn"];

Legg merke til at jeg bruker get istedetfor post. Funker kanskje med post også, men er slik jeg har lært det.

Dersom du vil teste ajax-php'en manuelt, kan du kjøre feks

http://localhost/dinside/test.php?pnrInput=0123&navn=Occi i nettleseren.

Endret 11. mai 2011 av MikkelRev

Occi · 11. mai 2011

Takk.

Jeg har kommet litt mer på vei, og tror jeg er rimelig nærme, men er tydeligvis noe som er feil. Jeg har klart å få tak i data vha. function(data) som du viste meg (takk!), men jeg klarer ikke å finne en if-setning som kan behandle data.

function sjekkPostnr(pnrInput)
{
var found = "";

if(pnrInput != null)
{
   	$.ajax({
       	url: 'php/sjekkPostNr_do.php',
       	type: 'POST',
       	data: ({
           	pnr: pnrInput
       	}),
       	success: function(data) {
           	// set var found to true/false depending on php-echo/return
           	found = data;
       	}
   	});
}
// trenger en if-setning som sjekker om found er endret, denne fungerer ikke og else blir triggered
if(found != "") 
{
   	alert("funnet");
   	return true;
}
else
{
   	alert("ikke funnet");
   	return false;
}
}

Endret 11. mai 2011 av Occi

MikkelRev · 11. mai 2011

Få php'en til å echo'e ut enten "1" eller "0". I success() bare tester du så data om den =="1" eller =="0".

Occi · 12. mai 2011

Tydeligvis oppfører ikke return og functions seg helt som jeg trodde i javascript. Å gjøre if(data == "1") funket perfekt, og jeg tenkte deretter å bare kjøre slik:

if(data == "1")
{
return true;
}
else
{
return false;
}

Og deretter i sjekkRegInput() (hovedfunksjonen):

else if(!sjekkPostnr(pnr))

Men jeg fant ut at dette gikk ikke, av en eller annen merkelig grunn, så jeg forcet true på denne else if-en og gjorde alert(sjekkPostnr(pnr)); og fikk dermed "undefined". Så var ikke så rart det ikke fungerte. Men hvordan skal jeg da gå frem, når jeg ikke klarer å sende noe tilbake når jeg kaller på funksjonen? For ellers virker det jo som om sjekkPostnr() fungerer som den skal (har testet med alerts).

Hele koden:

function sjekkRegInput()
{
var regStatus = $('#regStatus');

un = $('input[name$="regUsername"]').val();
pw = $('input[name$="regPassword"]').val();
fn = $('input[name$="regFName"]').val();
ln = $('input[name$="regLName"]').val();
adr = $('input[name$="regAdress"]').val();
pnr = $('input[name$="regPostnr"]').val();

if(isNaN(pnr))
{
   	regStatus.html("Postnr må være kun av tall");
   	regStatus.fadeIn("fast");
   	return false;
}
else if(!sjekkPostnr(pnr))
{
   	regStatus.html("Fant ikke postnummeret");
   	regStatus.fadeIn("fast");  
   	return false;
}
else if(un == "" || pw == "" || fn == "" || ln == "" || adr == "" || pnr == "")
{
   	regStatus.html("Vennligst fyll inn alle tekstfeltene.");
   	regStatus.fadeIn("fast");	
   	return false;
}
return true;
}


function sjekkPostnr(pnrInput)
{
if(pnrInput != null)
{
   	$.ajax({
       	url: 'php/sjekkPostNr_do.php',
       	type: 'POST',
       	data: ({
           	pnr: pnrInput
       	}),
       	success: function(data) {
           	// set var found to true/false depending on php-echo/return
           	if(data == "1")
           	{
               	return true;
           	}
           	else
           	{
               	return false;
           	}
       	}
   	});
}
}

Endret 12. mai 2011 av Occi

cbastus · 12. mai 2011

Ren kommentar: Det er greit å sjekke inputfeltene i omvendt rekke enn du gjør. Om du først sjekker alt er satt, så mer konkret hva som er satt og om det er gyldig, slipper du "feilmeldings looper" (i mangel av et bedre ord) hvor brukeren retter input for så å få beskjed om å rette noe annet ved neste submit. Det kan noen ganger også være fordelaktig å skrive ut alle feilmeldinger samlet.

Occi · 12. mai 2011

Ingen dum idé cbastus, takker :-)

Ellers er koden grei? Jeg har også input-validering på php-siden selvfølgelig.

FraXinuS · 12. mai 2011

Det du gjør der vil så klart ikke funke. Du prøver å bruke en asynkron funksjon som en blokkerende funksjon.

du kan prøve med: (Jeg har ikke testet dette, men jeg tror det skal funke.)

function sjekkPostnr(pnrInput)
{
   if(pnrInput != null)
   {
       var result;
       $.ajax({
           url: 'php/sjekkPostNr_do.php',
           type: 'POST',
           async: false,
           data: ({
               pnr: pnrInput
           }),
           success: function(data) {
               // set var found to true/false depending on php-echo/return
               result = data == "1";
           }
       });
       return result;
   }
}

Eller du kan redesigne koden din til å være mer asynkron, som er hele vitsen med ajax (Asynchronous JavaScript and XML).

Occi · 12. mai 2011

Takk - det funket ypperlig :-)

Her er hele koden om det er noen her som har lyst til å gjøre noe lignende. Valgte å ikke ta med selve registreringsscriptet (php), da det er såpass langt, og heller ikke relevant.

HTML-form: merk onclick="return sjekkRegInput()

<form action="?f=php&p=registration_do" method="post">
<table class="tStyle">
   	<tr>
       	<td>Brukernavn</td><td><input type="text" name="regUsername"
                                     	size="10" class="gbinput"
                                     	maxlength="45"></td>
   	</tr>
   	<tr>
       	<td>Passord</td><td><input type="password" name="regPassword"
                              		size="10" class="gbinput"
                              		maxlength="45"></td>
   	</tr>
   	<tr>
       	<td>Fornavn</td><td><input type="text" name="regFName"
                              		size="10" class="gbinput"
                              		maxlength="45"></td>
   	</tr>
   	<tr>
       	<td>Etternavn</td><td><input type="text" name="regLName"
                                		size="10" class="gbinput"
                                		maxlength="45"></td>
   	</tr>
   	<tr>
       	<td>Adresse</td><td><input type="text" name="regAdress"
                              		size="10" class="gbinput"
                              		maxlength="45"></td>
   	</tr>
   	<tr>
       	<td>Postnr</td><td><input type="text" name="regPostnr"
                                 	size="10" class="gbinput"
                                 	maxlength="4"></td>
   	</tr>
   	<tr>
       	<td></td><td><input type="submit" value="Registrer"
                           	onclick="return sjekkRegInput()"</td>
   	</tr>
   	<tr>
       	<td></td><td><div id="regStatus" style="color: gray;">
               	Vennligst fyll inn alle tekstfeltene.
           	</div></td>
   	</tr>
</table>
</form>

PHP-klassen som sjekker om postnr finnes i database

<?php
require("db_connect.php");

class SjekkPostNr
{
   	private $pnr;
   	private $db_connect, $db, $query, $result, $rows;

   	public function __construct($pnr)
   	{
       	$this->pnr = $pnr;
       	$this->db_connect = new DB_Connect();
       	$this->db = $this->db_connect->getDB();
   	}

   	public function sjekkPostNr()
   	{
       	if($this->db != null)
       	{
           	$this->query = sprintf("SELECT Postnr, Poststed FROM WS_Post
                                   	WHERE Postnr = '%s'",
                       	$this->db->real_escape_string($this->pnr));

           	$this->result = $this->db->query($this->query);

           	if($this->result)
           	{
               	$this->rows = $this->result->num_rows;

               	if($this->rows > 0)
               	{
                   	echo "1";
               	}
               	else
               	{
                   	echo "0";
               	}
           	}
           	else
           	{
               	echo "0";
           	}
       	}
       	else
       	{
           	echo "0";
       	}
   	}
}
?>

PHP-scriptet som oppretter klassen og kjører sjekkPostNr PHP-scriptet

<?php
require("../classes/sjekkPostNr.php");

$pnr = $_POST['pnr'];

$sjekkPostNr = new SjekkPostNr($pnr);

$sjekkPostNr->sjekkPostNr();
?>

Javascript-funksjonene som sjekker input

function sjekkRegInput()
{
var regStatus = $('#regStatus');

un = $('input[name$="regUsername"]').val();
pw = $('input[name$="regPassword"]').val();
fn = $('input[name$="regFName"]').val();
ln = $('input[name$="regLName"]').val();
adr = $('input[name$="regAdress"]').val();
pnr = $('input[name$="regPostnr"]').val();


if(un == "" || pw == "" || fn == "" || ln == "" || adr == "" || pnr == "")
{
   	regStatus.html("Vennligst fyll inn alle tekstfeltene.");
   	regStatus.fadeIn("fast");	
   	return false;
}
else if(isNaN(pnr))
{
   	regStatus.html("Postnr må være kun av tall");
   	regStatus.fadeIn("fast");
   	return false;
}
else if(!sjekkPostnr(pnr))
{
   	regStatus.html("Fant ikke postnummeret");
   	regStatus.fadeIn("fast");
   	return false;
}
return true;
}


function sjekkPostnr(pnrInput)
{
if(pnrInput != null)
{
   	$.ajax({
       	url: 'php/sjekkPostNr_do.php',
       	type: 'POST',
       	async: false,
       	data: ({
           	pnr: pnrInput
       	}),
       	success: function(data) {
           	result = data == "1";
       	}
   	});
   	return result;
}
}

@FraXinuS: slik jeg har forstått det er ajax nettopp asynkront, men hvordan burde jeg endret koden min i så fall for å oppfylle kravet om å være asynkront? Mer spesifikt, hva er det i scriptet mitt som bryter at det er asynkront?

Er ute etter å lære, men jeg ser ikke helt problemet i hvordan jeg har skrevet koden nå, men nå er jeg vant å skrive java og php, som ikke er asynkron i det hele tatt : p

Endret 12. mai 2011 av Occi

FraXinuS · 12. mai 2011

Når du bruker "async: false" i $.ajax så vil den blokkere helt til svaret fra serveren kommer. Hvis internettet er treget eller sjekken tar lang tid vil det blokkere hele nettsiden din til den returnerer.

Prøv f.eks å legge inn en sleep(10) i php/sjekkPostNr_do.php, mest sansynlig vil hele siden fryse helt til sjekkPostnr funksjonen returnerer.

For å få det asynkront må du endre måten du koder på. Du kan ikke bruke funksjonen slik:

if(!sjekkPostnr(pnr))
{
   regStatus.html("Fant ikke postnummeret");
   regStatus.fadeIn("fast");
   return false;
}

Når du koder slik betyr det at du vil ha svaret fra sjekkPostnr før du går viderer, altså ikke asynkront.

Hvis du vil ha koden asynkron kan du ikke kode på den måten, du må du istedet bruke callback-funksjoner. Da må du også endre sjekkRegInput() hvis ikke vil sjekkRegInput() returnere før sjekkPostnr().

Et raskt eksempel:

function sjekkPostnr(pnrInput, response)
{
   if(pnrInput != null)
   {
       $.ajax({
           url: 'php/sjekkPostNr_do.php',
           type: 'POST',
           data: ({
               pnr: pnrInput
           }),
           success: function(data) {
               response(data == "1");
           }
       });
       return;
   }
   response(false);
}





function sjekkRegInput()
{
   var regStatus = $('#regStatus');

   un = $('input[name$="regUsername"]').val();
   pw = $('input[name$="regPassword"]').val();
   fn = $('input[name$="regFName"]').val();
   ln = $('input[name$="regLName"]').val();
   adr = $('input[name$="regAdress"]').val();
   pnr = $('input[name$="regPostnr"]').val();


   if(un == "" || pw == "" || fn == "" || ln == "" || adr == "" || pnr == "")
   {
       regStatus.html("Vennligst fyll inn alle tekstfeltene.");
       regStatus.fadeIn("fast");
       return false;
   }
   else if(isNaN(pnr))
   {
       regStatus.html("Postnr må være kun av tall");
       regStatus.fadeIn("fast");
       return false;
   }
   else if(!sjekkPostnr(pnr))
   {
       regStatus.html("Fant ikke postnummeret");
       regStatus.fadeIn("fast");
       return false;
   }

   sjekkPostnr(pnr, function(is_valid){
       if(!is_valid){
           regStatus.html("Fant ikke postnummeret");
           regStatus.fadeIn("fast");
       }else
           $("#min-form-id").submit(); // submit formen hvis alt er ok.
   });


   return false;
}

Occi · 12. mai 2011

Takker. Skjønte at den ikke ville gå videre før den hadde sjekket postnr, og i mitt tilfelle er ikke det et så stort problem, men uansett tusen takk for at du tar deg tiden til å forklare meg hvordan jeg skal gjøre det, så får jeg se om jeg ikke får lagt det til på siden min eller brukt det noen andre steder. Har litt andre ting som må prioriteres over akkurat slikt småpirk hehe :-)

Logg inn

[Løst] Hente data returnert med ajax

Anbefalte innlegg

Occi

Lenke til kommentar

Videoannonse

MikkelRev

Lenke til kommentar

Occi

Lenke til kommentar

MikkelRev

Lenke til kommentar

Occi

Lenke til kommentar

MikkelRev

Lenke til kommentar

Occi

Lenke til kommentar

cbastus

Lenke til kommentar

Occi

Lenke til kommentar

FraXinuS

Lenke til kommentar

Occi

Lenke til kommentar

FraXinuS

Lenke til kommentar

Occi

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Woke i moderne underholdningsindustri 1 2 3 4 501

Hvem er aktive 0 medlemmer