בעיה בקבלת הערכים מאובייקט מסוג json בעזרת ajax jquery

[bdoron]

יצרתי web service שמחזיר לי string מסוג json , בדקתי האם הסטרינג באמת מחזיר אובייקט מסוג json והאובייקט תקין, הבעיה היא שאני מנסה לשלוף נתונים מהאובייקט דרך ajax אני לא מצליח

אבל אם אני מנסה לשלוף את הנתונים דרך ajax משהו לא עובד כמו שצריך

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

DbServices d = new DbServices();


string a = "boazsml@gmail.com";
string b = "1234";
email = d.GetUserDetails(a, b);

ואז הstring שאני מחזיר מצד השרת מראה לי את התוצאה הבאה:

[{"Email":"boazsml@gmail.com","FirstName":"boaz","LastName":"xxxsssddd","PhoneNumber":"0744564544","Pass":"1234","ImagePath":""}]

זה הקוד jquery שלי , חשוב לציין שיש לי כבר script אחד שעובד בajax , הבעיה היחידה שלי לדעתי לפחות היא איך לשלוף מהאובייקט data את הנתונים האלה

זה הקוד ajax שלי

window.onload = function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "DbServices.asmx/GetUserDetails",
data: "{email: '" + "boazsml@gmail.com" + "'" + ",pass: '" + "1234" + "' }",
dataType: "json",
success: function (data) {
var tr;
for (var i = 0; i < data.length; i++) {

tr.append("<span>" + data[i].Email + "</span>");
tr.append("<span>" + data[i].FirstName + "</span>");
tr.append("<span>" + data[i].LastName + "</span>");
tr.append("<span>" + data[i].PhoneNumber + "</span>");
tr.append("<span>" + data[i].Pass + "</span>");
tr.append("<span>" + data[i].ImagePath + "</span>");
$('#innerpage').append(tr);
}

},
error: function () {
alert("invalid error user");
}


});


};

- - - תגובה אוחדה: - - -

הסתדרתי בסוף אבל חשוב לי שתדעו מה הבעיה שהייתה, מסתבר שאם אני רוצה למשוך מידע , המידע מגיע לאובייקט לא data אלא smg.d

[שניצל]

כדאי רק שתשים לב שהקוד שלך פגיע ל-cross site scripting. אם המידע שמגיע מהשרת מכיל תגיות html אז הקוד שלך יריץ אותן.

[bdoron]

איך אני מונע את זה ? מה הדרכים למנוע? אשמח לדעת..

[שניצל]

יש שתי דרכים:

דרך אחד היא ביצוע סניטציה (sanitize) של הטקסט, ככה:

tr.append("<span>" + escapeHTML(data[i].Email) + "</span>");

אין כזו פונקציה בשם escapeHTML מוגדרת ב-JS, אתה צריך לכתוב אותה בעצמך. חפש את הפונקציה escapeHTML בדף הזה.

האופציה הנכונה יותר היא לא לבנות html באופן כזה (ע"י שרשור מחרוזות) אלא ע"י בניית האלמנטים עצמם, בדיוק כמו שלא בונים מחרוזת SQL באופן כזה, אלא באמצעות פרמטרים.

דהיינו אתה צריך לעשות משהו כזה:

var sp = document.createElement("span");
sp.innerText(data[i].Email);
$('#innerpage').append(sp);

או לחילופין:

var sp = document.createElement("span");
var t = document.createTextNode(data[i].Email);
sp.appendChild(t);
$('#innerpage').append(sp);

השימוש ב-innerTextאו ב-createTextNode גורם לדפדפן להתייחס לתוכן שלו בתור טקסט ולא בתור html.

עריכה: אחרי חיפוש קל מצאתי ש-createTextNode זו הדרך המועדפת.