הוסטס - פורום אחסון האתרים הגדול בישראל

- פורום תיכנות (https://hosts.co.il/forums/forumdisplay.php?f=14)

- - עזרה בAJAX (https://hosts.co.il/forums/showthread.php?t=66299)

שלום,
לא מזמן התחלתי ללמוד להשתמש בAJAX.
יצרתי לי עמוד (בדיקה), עם טופס התחברות.

יש שם משתמש וסיסמא.
ברגע שמזינים פרטים יש הודעה בAJAX שרושמת האם הפרטים נכונים או לא.
שזה בעצם דבר דיי פשוט.

מה שאני רוצה לעשות זה לעשות שהשדה שבו מזינים את שם המשתמש ישתנה (צבע שונה, וכו').

ויש לי עוד שאלה, אני עובד בשיטת GET, משמע יש קובץ login.php וקובץ ajax.php שאיתו בעצם אני בודק את הפרטים במסד ומחזיר פלט (נכון / לא נכון), השאלה שלי אם חייב את הקובץ ajax.php או שניתן לעשות את זה בצורה דומה עם קובץ אחד בלבד (login.php).

אם צריכים פרטים נוספים תגידו ואני אוסיף.
תודה מראש :)

אפשר בקובץ אחד. תשתמש ב eval בשביל הצבעים.

ציטוט:

אתה יכול לפרט יותר בבקשה?

eval הופכת את הטקסט לקוד, אז אם ה ajax יחזיר "alert(123)" ותעשה לזה eval תקבל הודעה 123.
אז תחזיר פלט כזה שישנה את הצבע (=dhtml), תשתמש בנתיים ב getDocumentById. לעוד מידע, תתחיל לחפש google.co.il |שריף|

ציטוט:

נכתב במקור על ידי mlnn (פרסם 659206)

אפשר בקובץ אחד. תשתמש ב eval בשביל הצבעים.

אתה יכול לפרט יותר בבקשה? |קורץ|

אתה פשוט יכול לעשות דבר כזה
נגיד אתה מקבל ok אם הפרטים נכונים או bad אם הפרטים שגויים.

קוד:



<script type="text/javascript">

  // some ajax code...

  var response = ajaxobj.responseText;



  if ( response == 'ok' )

  {

    text = "<span style='color:green'>הפרטים שהזנת נכונים</span>";

  }

  else

  {

    text = "<span style='color:red'>הפרטים שהזנת שגויים</span>";

  }

   

  document.getElementById('answer').innerHTML = text;

</script>



<form...>

<input...>

</form>

<div id="answer"></div>

בקשר לשאלה השנייה, אתה יכול להשתמש בקובץ אחד.

PHP קוד:


		
			
$user = $_GET['user'];

$pass = $_GET['pass'];



$q = mysql_query(...);



print mysql_num_rows() ? "ok" : "bad";

exit();

this is an sample ajax request:

קוד:

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<script>

$("div#validate_information").click( function() {

   username = $("div#username");

   password = $("div#password");

     $.get("a.php", { user: username.text(), pass: password.text() }, function(returnedValue){

      class = "ohboy";

          if (returnedValue == "okay")

             class = "okay";

      username.addClass(class);

          password.addClass(class);

     });

});

</script>

i really don't know why i wrote it in JQUERY but im not going to rewrite it (;
btw
i would use JSON to serialize the variables i want to send in this stream

טוב אפשר להגיד שקצת הסתבכתי עם כל הפתרונות.
אני מחפש משהו פשוט שגם יהיה לי קל להבין אותו (רק לפני מספר ימים התחלתי ללמוד AJAX).

הנה הJS שבטופס התחברות עצמו:

HTML קוד:

<script type="text/javascript">

function ajaxFunction()

{

var ajaxRequest;

try

  {

  // Firefox, Opera 8.0+, Safari

  ajaxRequest=new XMLHttpRequest();

  }

catch (e)

  {

  // Internet Explorer

  try

    {

    ajaxRequest=new ActiveXObject("Msxml2.XMLHTTP");

    }

  catch (e)

    {

    try

      {

      ajaxRequest=new ActiveXObject("Microsoft.XMLHTTP");

      }

    catch (e)

      {

      alert("Your browser does not support AJAX!");

      return false;

      }

    }

  }

        // Create a function that will receive data sent from the server

        ajaxRequest.onreadystatechange = function(){

                if(ajaxRequest.readyState == 4){

                        var ajaxDisplay = document.getElementById('ajaxDiv');

                        ajaxDisplay.innerHTML = ajaxRequest.responseText;

                }

        }

        var name = document.getElementById('username').value;

        var pass = document.getElementById('password').value;

        var queryString = "?username=" + name + "&password=" + pass;

        ajaxRequest.open("GET", "ajax.php" + queryString, true);

        ajaxRequest.send(null); 

}

</script>

זה הטופס:

HTML קוד:

<form method="post" action="">

<table cellpadding="0" cellspacing="0" border="0" align="center">

<tr>

<td><strong>שם משתמש:</strong></td>

<td style="text-align: center;"><input size="16" onblur='ajaxFunction()' name="username" type="text" id="username" value="" style="font-family: Arial;" />

</td>

</tr>

<tr>

<td><strong>סיסמא:</strong></td>

<td style="text-align: center;"><input size="16" onblur='ajaxFunction()' name="password" type="password" id="password" value='' style="font-family: Arial;" /></td>

</tr>

<tr>

<td colspan="2">

<br /><br />

<input type="submit" name="submit" value="התחבר" />

</td>

</tr>

</table>

</form>

וזה הקובץ ajax.php

PHP קוד:


		
			
<?

ob_start();

header("Content-type: text/html; charset=windows-1255");

ob_end_clean();

$name = $_GET['username'];

$pass = $_GET['password'];



$ok=1;

    require_once('db.php');

    if($ok==1)

    {

        $passhash=md5($pass);

        $query = "SELECT username, password FROM `users` WHERE `username` = '$name' AND `password` = '$passhash'";

        //$query = "SELECT username FROM `users` WHERE `username` = '$name'";

        $result = mysql_query($query , $link);

        if(mysql_num_rows($result) == 1) {

            echo '<p class="ok">הפרטים שהזנת נכונים =]</p>';

        } else {

            echo '<p class="error">הפרטים שהזנת שגויים!</p>';

        }

    }

?>

אני רק רוצה שהשדה username ישנה את הצבע לכחול (או כל צבע אחר, סתם בשביל הדוגמה) ברגע שהפרטים נכונים.

כרגע ההצעה שנראית לי הכי פשוטה זה של DvirCohen, אבל לא הבנתי איך להחזיר תשובה לקובץ login.

תודה על העזרה :)

תבדוק את התגובה שקיבלת מהקובץ ajax, ואז תבצע תנאי שאם למשל קיבלת true אז תשנה את צבע המסגרת של השדה.
לשנות צבע מסגרת של שדה הולך ככה:

HTML קוד:

document.getElementById('username').style.borderColor = 'SomeColor';

הנה לינק לשאר האובייקטים הקימיים בDOM:
http://www.w3schools.com/htmldom/dom_obj_style.asp

ד"א, תאבטח את הנתונים שקיבלת בGET לפני שאתה משווה בשאילתא.

ציטוט:

נכתב במקור על ידי daMn (פרסם 659355)

HTML קוד:

document.getElementById('username').style.borderColor = 'SomeColor';

תודה רבה :)
הצלחתי =]

i still can't figure out why you are ignoring my comment?
jquery will save you a lot of time and will make things easier than ever (;

ציטוט:

נכתב במקור על ידי nitsanbn (פרסם 659458)

i still can't figure out why you are ignoring my comment?
jquery will save you a lot of time and will make things easier than ever (;

אני מסכים איתך שJQuery מקצר את הדברים ומייעל את הקוד בכמה רמות, אני אישית מעריץ לא קטן של הFW הזה, יחד עם זאת אני חושב שלפני שניגשים לעבודה עם FW כלשהו קודם צריך להבין איך הכול עובד או לפחות רובו, ולפי התיאור הבנאדם צריך לצבור עוד ידע בJS וDOM.