Nu vad gresala in ajax

Discutii legate de AJAX, jQuery, MooTools, Prototype, Dojo, Yahoo! UI Library,script.aculo.us, ExtJS,AngularJS, Backbone.js, Ember.js, KnockoutJS

Moderator: Moderatori

mirceabondar
Average Member
Mesaje: 115
Membru din: Sâm Mai 29, 2010 7:42 pm

Nu vad gresala in ajax

Mesajde mirceabondar » Vin Oct 26, 2012 10:18 am

Am urmatorul cod ajax care ar trbui sa afiseze ok fara a mai incarca pagina test.php:

Cod: Selectaţi tot

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">


function post_data(){
var xml = new XMLHttpRequest();
var php = "test.php";
var nume = document.getElementById("nume").value;
var mesaj = "nume="+nume+"&prenume="+prenume;
xml.open("POST", php, true);
xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xml.onreadystatechange = function(){
if(xml.readyState == 4 && xml.status == 200){
var data = xml.responseText;
document.getElementById("mesaj").innerHTML = data;
}
}

xml.send(mesaj);
}

</script>
</head>

<body>
<div id="mesaj">mesaj</div>
<input type="text" name="nume" id="nume" />
<input  type="submit" value="trimite" onclick="javascript:post_data();" />
</body>
</html>



Fisierul test.php nu contine decat:

Cod: Selectaţi tot

<?php
echo 'ok';
?>


M-am documentat de pe un tutorial pe care il am pe hartie. Ideea e ca nu functioneaza (nu afiseaza ok). Am imprimat si acest cod si l-am comparat cu cel de pe care m-am ghidat si nu vad unde e gresala. Imi puteti spune unde am gresit?

Am folosit var xml = new XMLHttpRequest(); pentru ca folosesc chrome.



Avatar utilizator
MihaiC
Senior Member
Mesaje: 1644
Membru din: Dum Mai 14, 2006 8:07 pm

Re: Nu vad gresala in ajax

Mesajde MihaiC » Vin Oct 26, 2012 11:35 am

Poti folosi consola din firebug pentru a vedea daca primesti o eroare.
Eu vad o variabila nedefinita (prenume).

Si in locul tau as folosi jQuery (unul din motive e ca e optimizat pentru toate browser-ele, printre altele)

Cod: Selectaţi tot

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function postData() {
   var nume = $('#nume').val();
   $.ajax({
      url: 'test.php',
      type: 'POST',
      data: { nume: nume },
      success: function(data) {
         $('#mesaj').text(data);
      }
   });
}
</script>
</head>
<body>
   <div id="mesaj">mesaj</div>
   <input type="text" name="nume" id="nume" />
   <input  type="submit" value="trimite" onclick="javascript:postData();" />
</body>
</html>
Dev @ oblio.eu

mirceabondar
Average Member
Mesaje: 115
Membru din: Sâm Mai 29, 2010 7:42 pm

Re: Nu vad gresala in ajax

Mesajde mirceabondar » Vin Oct 26, 2012 1:13 pm

Am facut cu jquery si merge pe u formular test. dar pe formularul asta nu merge:



Cod: Selectaţi tot

      
<div id="contact_comanda">
<div id="x"><a id="close" href="javascript:x()"></a></div>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--Get jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<!--display bar only if file is chosen-->
<script>

function postData() {
   var nume = document.getElementById('nume').value;
   $.ajax({
      url: 'test.php',
      type: 'POST',
      data: { nume: nume },
      success: function(data) {
         $('#mesaj').text(data);
      }
   });
}
</script>

</head>

<body>


   <h3 class="h3">Incarca documentul</h3>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<!--APC hidden field-->
    <input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo $up_id; ?>"/>
<!---->
    <input name="file" type="file" id="file" size="30"/>
   <!--Include the iframe-->
    <br />
    <iframe id="upload_frame" name="upload_frame" frameborder="0" border="0" src="" scrolling="no" scrollbar="no" > </iframe>
    <br />
<!---->


<h1 class="h1">Descriere lucrare</h1>
<table>
<tr>
<td class="td" >
<label for="dimensiunex">Dimensiuni L (mm)</label>
</td>
<td>
<input class="dimensiuni" type="text" name="dimensiuneL" onkeydown= size="30"/>
<label for="dimensiuni">x l (mm)</label>
<input class="dimensiuni" type="text" name="dimensiunel" size="30"/>
</td>
</tr>



<tr>
<td class="td">
<label for="hartie">Hartie</label>
</td>
<td>
<input class="input" type="text" name="hartie" size="30" />
</td>
<td class="td">
<label for="biguri">Biguri</label>
</td>
<td>
<select class="input" name="biguri">
<option value="da">Da</option>
<option value="nu">Nu</option>
</select>
</td>
</tr>


<tr>
<td class="td">
<label for="gramaj">Gramaj</label>
</td>
<td>
<input class="input" type="text" name="gramaj" size="30" />
</td>
<td class="td">
<label for="perfor">Perfor</label>
</td>
<td class="td">
<select class="input" name="perfor">
<option value="da">Da</option>
<option value="nu">Nu</option>
</select>
</td>
</tr>

<tr>
<td class="td">
<label for="inseriere">Inseriere</label>
</td>
<td>
<input class="input" type="text" name="inseriere" size="30" />
</td>
<td class="td">
<label for="tipar">Tipar</label>
</td>
<td>
<select class="input" name="tipar">
<option value="4+0">4 + 0</option>
<option value="4+4">4 + 4</option>
<option value="1+0">1 + 0</option>
<option value="1+1">1 + 1</option>
</select>
</td>
</tr>

<tr>
<td class="td">
<label for="plastifiere">Plastifiere</label>
</td>
<td>
<select class="input" name="plastifiere">
<option value="fara">Fara plastifiere</option>
<option value="coperta lucioasa">Coperta lucioasa</option>
<option value="coperta mata">Coperta mata</option>
<option value="lucioasa integral">Lucioasa integral</option>
<option value="mata integral">Mata integral</option>
</select>
</td>

<td class="td">
<label for="cantitate">Cantitate</label>
</td>
<td>
<input class="input" type="text" name="cantitate" size="30" />
</td>

</tr>

<tr>
<td class="td">
<label for="legare">Legare</label>
</td>
<td>
<select class="input" name="legare">
<option value="spira metal">Spira metal</option>
<option value="spira plastic">Spira plastic</option>
<option value="capsare">Capsare</option>
<option value="brosare">Brosare</option>
<option value="scoarta">Scoarta</option>
</select>
</td>
<td class="td">
<label for="numarpag">Numar pagini</label>
</td>
<td>
<input class="input" type="text" name="numarpag" size="30" />
</td>
</tr>
<tr>
<td class="td">
<label for="observatii">Observatii</label>
</td>
<td  colspan="3">
<textarea id="textarea_comanda" name="observatii"></textarea>
</td>
</tr>


<td colspan="5">
<h2 class="h2">Date de contact</h2>
</td>


<tr>
<td class="td">
<label for="compania">Compania</label>
</td>
<td>
<input class="input" type="text" name="compania" size="30" />
</td>
</tr>

<tr>
<td class="td">
<label for="nume">Nume</label>
</td>
<td>
<input class="input" type="text" name="nume" size="30" id="nume" /><span class="require">*</span>
</td>
</tr>

<tr>
<td class="td">
<label for="email">Email</label>
</td>
<td>
<input class="input" type="text" name="email" size="30" id="email" /><span class="require">*</span>
</td>
</tr>

<tr>
<td class="td">
<label for="email">Telefon</label>
</td>
<td>
<input class="input" type="text" name="telefon" size="30" id="telefon" /><span class="require">*</span>
</td>
</tr>


<tr>
<td></td>
<td><input id="trimite" type="submit" name="trimite" value="Trimite cererea" onClick="javascript:postData();"/></td>
<td><input id="inchide" type="reset" name="inchide" value="Anuleaza"  /></td>
</tr>

</table>
<div id="mesaj" style="padding:0; margin:2px; color:#FF3300;"></div>
<div id="raspuns"></div>
</div>

Avatar utilizator
MihaiC
Senior Member
Mesaje: 1644
Membru din: Dum Mai 14, 2006 8:07 pm

Re: Nu vad gresala in ajax

Mesajde MihaiC » Vin Oct 26, 2012 1:45 pm

Pai si te mira acest lucru ?
In primul rand, invata sa faci un document HTML valid (macar chestiile de baza daca nu in totalitate), ma refer sa nu ai tag-uri inainte de DOCTYPE, sa nu uiti sa inchizi tag-uri etc.

In al doilea rand, nu introduce de doua ori acelas lucru.

Cod: Selectaţi tot

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>


In al treilea rand, exista documentatie pe net.
Trebuie doar sa construiesti un JSON cu informatiile pe care le iei din formular si sa le trimiti prin parametrul "data".

http://api.jquery.com/jQuery.ajax/
http://api.jquery.com/jQuery.post/
http://www.w3schools.com/json/default.asp
Dev @ oblio.eu


Înapoi la “Librarii Javascript”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 7 vizitatori