AJAX שליחת בקשה לשרת עם כמה פרמטרים

dovid

צריך לתת לdata אובייקט JS כששם המאפיין הוא שם הפרמטר. ככה:

data: { ID = lastParameterNum } ,

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

כל בקשת אינטרנט יכולה לכלול פרמטרים בשתי דרכים: POST וGET.
בGET הפרמטרים משורשרים אחרי הכתובת וסימן שאלה, עם שם=ערך. ביותר מפרמטר אחד אז בין הפרמטרים מפריד &.
בPOST זה אותו הדבר רק לא אחרי הכתובת וסימן שאלה אלא בתוכן הבקשה (בGTE התוכן ריק).

להלן בקשת GET וPOST טקסטואלית

GET http://code.613m.org/viewtopic.php?f=10&t=1038 HTTP/1.1

POST

GET http://code.613m.org/viewtopic.php HTTP/1.1

f=10&t=1038

הכותרת GET כוללת את הנתיב, ומקרה של שאילתת GET כוללת את הפרמטרים. השורה האחרונה בשאילתת הפוסט נחשבת "גוף ההודעה" ושם מועברים הפרמטרים במקרה של שאילתת POST.

כעת לHTML שאמור לשלוח פרמטרים.
בHTML יש אלמנט form. הוא משמש לשלוח שאילתות לשרת עם פרמטרים. מציינים לו באטריביוט method האם לחבר את הפרמטרים בpost, או get (ברירת מחדל). במידה ורוצים לשלוח לנתיב אחר מנתיב הנוכחי אז מציינים בaction נתיב. מוסיפים שדות קלט ונותנים להם שם באטריביוט name. מוסיפים שדה input\button כשבtype שלו כתוב sumit וזהו. כל שאר העבודה עושה הדפדפן. הנה הHTML הזה:

<form action="http://stackoverflow.com/search">
  <input type="text" value="123" name="q" />
  <input type="submit" value="Submit">
</form>

מניב את הURL הזה:
http://stackoverflow.com/search?q=123

בתור המפתח שמציג למשתמש טופס לפעמים את רוצה לדעת פרמטרים שאינם מעניינו של המשתמש. במקרה כזה אתה יכול לכלול אותם בvalue של inpit שהtype שלהם הוא hidden. ואז הפרמטר עם שמו יכלל בבקשה בלי שיוצג.
גם בajax אפשר לנצל את איסוף הפרמטרים הנחמדה של הform. למשל בjQury הפונקציה ajaxSubmit שמופעלת על אלמנט form מפעילה אותו בלי לרפרש את הדף וחוסכת את איסוף הפרמטרים שכן היחא משתמשת בפרמטרי הform.

פורסם במקור בפורום CODE613 ב28/10/2015 13:37 (+02:00)

avr416

דוד, תודה רבה רבה על שתי התשובות המפורטות כל כך!! יישר כח גדול על כל ההשקעה בכתיבת התשובות המפורטות והבהירות!!
@דוד ל.ט.

צריך לתת לdata אובייקט JS כששם המאפיין הוא שם הפרמטר. ככה:
data: { ID = lastParameterNum } ,

אם אני מבין נכון אז אני צריך להציב בתוך הסוגריים המסולסלות את 3 הפרמטרים מופרדים בפסיקים, או כל פרמטר להציב בנפרד בתור סוגריים כאלו בשורה של הדטה?
כלומר האם כך:

data:{parametersID=parameter,ID=ID,LastParameterNum=lastParameterNum},

או כך:

data:{parametersID=parameter}{ID=ID}{LastParameterNum=lastParameterNum},

אם זה לפי הדוגמא האחרונה, האם צריך לשרשר אותם ע"י + או לשים ביניהם פסיק, או שאין צורך בשום דבר.
כמו כן, בVS הוא אומר לי שבמקום = צריך להיות :, האם הוא צודק?

לגבי ההסבר המפורט - תודה רבה!
לגבי הטפסים אני יודע שזה הדרך הכי נוחה ושזה מבוצע אוט', אך באמת לא ידעתי כיצד השרת שולח את זה (דהיינו ה? וה& וכדו'). אני באמת צריך לראות אם אצלי אני יכול לעשות זאת ע"י שימוש באלמנט form או שזה קצת יותר מורכב..

לגבי החלק השני בשאלתי, אני מקבל בחזרה מהשרת אלמנט של HTML שאני רוצה להוסיף לטופס, כיצד אני עושה זאת בדיוק?
אני אמור לעשות לו איזה המרה או שאני מקבל אותו מוכן ואני רק צריך להגדיר לו בתוך איזה div להציב אותו?

ושוב, תודה ענקית על כל ההשקעה שלך!!! זה באמת לא מובן מאליו :lol:

פורסם במקור בפורום CODE613 ב28/10/2015 15:24 (+02:00)

אהרן

האפשרות הראשונה
תפריד אותם עם פסיק
ואכן, ההשמה הינו באמצעות נקודתיים.

פורסם במקור בפורום CODE613 ב28/10/2015 15:53 (+02:00)

dovid

@avr416

לגבי החלק השני בשאלתי, אני מקבל בחזרה מהשרת אלמנט של HTML שאני רוצה להוסיף לטופס, כיצד אני עושה זאת בדיוק?
אני אמור לעשות לו איזה המרה או שאני מקבל אותו מוכן ואני רק צריך להגדיר לו בתוך איזה div להציב אותו?

success: function (data) {
    $("#searchresults").html(data);
}

פורסם במקור בפורום CODE613 ב28/10/2015 16:37 (+02:00)

אהרן

דוד
אני חושב שזה נכוןל מקרה והוא יוצר קלאס ריק
אחרת צריך להשתמש בפונקצית האפנד.

פורסם במקור בפורום CODE613 ב28/10/2015 17:51 (+02:00)

dovid

@אהרן

דוד
אני חושב שזה נכוןל מקרה והוא יוצר קלאס ריק
אחרת צריך להשתמש בפונקצית האפנד.

ברור. https://jsfiddle.net/s66r65sb/

פורסם במקור בפורום CODE613 ב28/10/2015 18:47 (+02:00)

avr416

עדכון:
הייתי צריך ליצור אופציה של שליחת חלק מנתוני הטופס בצורה אסינכרונית, לשם הוספה דינמית של חלקים נוספים לטופס הראשי.
ניסיתי להשתמש בתגית form כמו שהצעתם, אבל הבעיה שלה שכאשר המשתמש לוחץ על submit זה מרענן את כל הדף.. ניסיתי ליצור כפתור מותאם אישית ולהגדיר בjs שבלחיצה עליו יפעיל את האירוע submit של הטופס (הפנימי, לא הראשי), וגם זה לא עבד...
לכן, נאלצתי להשתמש בפקדים רגילים, ולכתוב פונקציה שיודעת לקחת את הValue שלהם ולשלוח אותו לשרת עם AJAX והכל על מקומו בא בשלום :lol: :lol:
תודה רבה רבה על כל העזרה!!

פורסם במקור בפורום CODE613 ב02/11/2015 08:29 (+02:00)

softs

@avr416

ניסיתי להשתמש בתגית form כמו שהצעתם, אבל הבעיה שלה שכאשר המשתמש לוחץ על submit זה מרענן את כל הדף.. ניסיתי ליצור כפתור מותאם אישית ולהגדיר בjs שבלחיצה עליו יפעיל את האירוע submit של הטופס (הפנימי, לא הראשי), וגם זה לא עבד...
לכן, נאלצתי להשתמש בפקדים רגילים, ולכתוב פונקציה שיודעת לקחת את הValue שלהם ולשלוח אותו לשרת עם AJAX והכל על מקומו בא בשלום :lol: :lol:

@דוד ל.ט.

גם בajax אפשר לנצל את איסוף הפרמטרים הנחמדה של הform. למשל בjQury הפונקציה ajaxSubmit שמופעלת על אלמנט form מפעילה אותו בלי לרפרש את הדף וחוסכת את איסוף הפרמטרים שכן היחא משתמשת בפרמטרי הform.

לזה בדיוק כיוון דוד, ליצור form בלי submit אלא עם כפתור רגיל ולקרוא ל ajaxSubmit
http://jsfiddle.net/rzoo1nno/1/

פורסם במקור בפורום CODE613 ב02/11/2015 11:50 (+02:00)

dovid

@softs

לזה בדיוק כיוון דוד, ליצור form בלי submit אלא עם כפתור רגיל ולקרוא ל ajaxSubmit
http://jsfiddle.net/rzoo1nno/1/

או לחילופין להגדיר שלחיצת הכפתור submit תטופל בajax ע"י

$("#theForm").ajaxForm();

http://jsfiddle.net/6q7qjynb/

פורסם במקור בפורום CODE613 ב02/11/2015 11:57 (+02:00)

avr416

כנראה שהטעות שלי הייתה שכתבתי בפונקציה:

$("#addNew").submit();

ולא ajaxSubmit..

בכל אופן - תודה רבה רבה!!

פורסם במקור בפורום CODE613 ב02/11/2015 12:17 (+02:00)

תחומים - פורום חרדי מקצועי

AJAX שליחת בקשה לשרת עם כמה פרמטרים