አጃክስ ቅጽ jqueryን በመጠቀም ወደ አገልጋይ በመላክ ላይ

ዝርዝር ሁኔታ:

አጃክስ ቅጽ jqueryን በመጠቀም ወደ አገልጋይ በመላክ ላይ
አጃክስ ቅጽ jqueryን በመጠቀም ወደ አገልጋይ በመላክ ላይ
Anonim

የተሳሳተ ውሂብ ያስገቡት እውነታ ስንት ጊዜ አጋጥሞታል፣በዚህም ምክንያት ገጹ እንደገና ተጭኖ በመስክ ውስጥ የገቡትን ቁምፊዎች ሙሉ በሙሉ ሰርዟል። ይህንን ለማስተካከል የተጠቃሚ በይነገጽን ለመገንባት በጣም ታዋቂ አቀራረብ አለ ፣ ስሙም አጃክስ ነው። በብዙ ፕሮጀክቶች ላይ ይታያል እና በብዙ መንገዶች ጥቅም ላይ ይውላል።

አጃክስ ቅጽ በመላክ ላይ፡-ላይብረሪዎችን ማገናኘት

የ jquery ቤተ-መጽሐፍትን በindex.php ያካትቱ።


በሰነድ ውስጥ jquery የሚያካትትበት ሌላ መንገድ አለ። ቤተ መፃህፍቱን ከ jquery ኦፊሴላዊ ድረ-ገጽ ማውረድ አለብዎት, በትክክለኛው አቃፊ ውስጥ ያስቀምጡት እና አገናኙን እንደሚከተለው ይለጥፉ:


ሰነዶችን ማገናኘት እና ማዋቀር

1። ለርስዎ ምቹ በሆነ ማንኛውም ስም ከጣቢያው ጋር የ.php ሰነድ ይፍጠሩ - ይህ የ ajax php ቅጽ መላክ ይሆናል. በእሱ ውስጥ ከመልእክቱ ጋር ያለው ጽሑፍ በየትኛው ቅርጸት እንደሚታይ መጻፍ ይችላሉ. ለምሳሌ፣ ቅጽ1.php.

የጣቢያ አቃፊ
የጣቢያ አቃፊ

2። በጃቫስክሪፕት ፋይሎች አቃፊዎ ውስጥ የ.js ፋይል ይፍጠሩማንኛውም ተስማሚ ስም. ለምሳሌ፣ form.js.

js አቃፊ
js አቃፊ

3። ይህን አቃፊ ከሰነድዎ ጋር ያገናኙት።


4። ከሚከተሉት መለኪያዎች ጋር ቅጽ ይፍጠሩ፡


በውስጡ፣ ውሂብዎን የሚያስገቡበት መስኮችን መፍጠርዎን አይርሱ።

5። ከጣቢያው ጋር ባለው ማውጫ ውስጥ ወደ ፋይል ቅጽ1.php ይሂዱ፣ በዚህ ውስጥ ይፃፉ፡

አሁን፣ ቅጹን በሚያስገቡበት ጊዜ አሳሹ ስለ ዳታው መረጃ ያሳያል።

በተመሳሳይ ፋይል ውስጥ በትክክል ምን እንደሚታይ ወይም እንዴት እንደሚታይ መፃፍ ይችላሉ። እንዲሁም ዑደቶችን ወይም ስልተ ቀመሮችን እዚህ መፃፍ ይችላሉ።

አጃክስ jquery ቅጽ በመላክ ላይ

1። በተፈጠረው ቅጽ.js ፋይል ውስጥ የጣቢያው ገጽ ሙሉ በሙሉ ከተጫነ በኋላ ፋይሉ እንዲሰራ ሃላፊነት ያለበትን ኮድ መጻፍ ያስፈልግዎታል።


$(ሰነድ)።ዝግጁ(ተግባር(){//የእኛ ቀጣዩ ኮድ እዚህ ይሰራል });

2። ከዚያ የማስረከቢያ አዝራሩን ማበጀት ያስፈልግዎታል. ሁሉንም በተመሳሳይ ፋይል ያድርጉት።


$("ቅጽ")። አስረክብ(ተግባር(ክስተት) { event.preventDefault(); //የሚከተለው ኮድ እዚህ ይፃፋል});

የኮዱ የመጀመሪያ ክፍል በገጹ ላይ ያለውን ኤለመንትን የመምረጥ ሃላፊነት አለበት፣ ሁለተኛው ደግሞ ነባሪውን እርምጃ የመከላከል ሃላፊነት አለበት።

3። ከዚያ፣ ለምሳሌ፣ በስኬት ላይ የአጃክስ ቅጽ ያስገቡ።


$.ajax({ አይነት፡ $(ይህ)።attr('ዘዴ')፣ url: $(this).attr('እርምጃ')፣ ውሂብ፡ አዲስ ፎርምዳታ(ይህ), ይዘት አይነት: ሐሰት, መሸጎጫ: ሐሰት, ሂደት ውሂብ: ውሸት, ስኬት: ተግባር (ውጤት){ማስጠንቀቂያ(ውጤት); } });

የሚከተሉት የእያንዳንዱ ቅንብር ዝርዝር መግለጫዎች ናቸው።

  • አይነት -ይህ በቅጹ ላይ የሚቀርበው የጥያቄ አይነት ነው; POST ስለሚያስከፍል የጥያቄው አይነት ተገቢ ይሆናል፤
  • ይህ - በግንባታው ውስጥ የንጥል ምርጫ፤
  • attr - አጭር ለመሳብ (መስህብ)፣ ማለትም፣ የተመረጠው ዒላማ (ቅጽ) የተወሰነ ግቤት ይሳባል፤
  • url - ጥያቄው የሚላክበት ቦታ ኃላፊነት ያለው መለኪያ; በዚህ አጋጣሚ በቅጽ ግቤቶች (form1.php) የተፃፈው ነገር፤
  • ውሂብ - የቅጽ ውሂብን ይገልጻል፤
  • የይዘት ዓይነት - ራስጌዎችን ወደ አገልጋዩ የመላክ ኃላፊነት አለበት፤ በዚህ አጋጣሚ አያስፈልግም፤
  • መሸጎጫ - የተጠቃሚውን መሸጎጫ የማስቀመጥ ኃላፊነት አለበት፤
  • የሂደት ዳታ - ውሂብን ወደ ሕብረቁምፊ የመቀየር ሃላፊነት አለበት፤
  • ስኬት - የተሳካ የውሂብ ማስረከቢያ ውጤትን ያሳያል። ስለዚህ ውሂብ መላክ የተሳካ ከሆነ የተግባሩ ተግባራት ይፈጸማሉ።

4። ተከናውኗል፣ አሁን የአጃክስ ቅጽ በሚያስገቡበት ጊዜ፣ ገጹን ሳያድስ ውሂብ ይደርስዎታል።

ውጤቱ የፎርም1.php ፋይልን በመጠቀም ሊቀየር ይችላል፣በዚህም ምክንያት በትክክል ምን እንደሚታይ መግለጽ ይችላሉ። ለምሳሌ፣

ሙከራ ማድረግ እና የተወሰነ ውሂብ የማስገባት ትክክለኛነት ማረጋገጥ ይችላሉ፡ ውሂቡ ትክክል ካልሆነ የሚፈለገው መልእክት ይታያል፣ ካልሆነ ግን ወደ ትክክለኛው ገጽ ይመራዋል። ልብህ የሚፈልገውን ሁሉ ሌሎች ብዙ ነገሮችም ይቻላል።

አጃክስ ምሳሌ
አጃክስ ምሳሌ

እንዲሁም በተመሳሳይ መልኩ ውሂብ ወደ አገልጋዩ መላክ አለ። በዚህ ጊዜ ተጠቃሚው ጽሑፍ ሲያስገባ ነው, እና ወዲያውኑ በቀይ ይደምቃል, ይህም የገባው ውሂብ ትክክል እንዳልሆነ ያመለክታል. ስለ እሱበይነመረብ ላይ ሁሉም ነገር በግልፅ የተብራራበት እና በምሳሌ የታየባቸው ብዙ መመሪያዎች አሉ።

ማጠቃለያ

ያለ ጥርጥር አጃክስ በድር ጣቢያ ግንባታ ላይ ጠቃሚ መሳሪያ ነው። ከፍተኛ ጥራት ያላቸውን ገጾች እና በይነገጾች ለመሥራት በቀላሉ አስፈላጊ ነው. ስዕሉን እና በኮዱ ውስጥ የተፃፈውን ሙሉ በሙሉ ለመረዳት jQuery ማወቅ በጣም አስፈላጊ መሆኑን ልብ ሊባል የሚገባው ነው, ምክንያቱም ቀላል ኮፒ-መለጠፍ ሁልጊዜ ሊረዳዎ እና ኮዱን እንዲረዱ ሊያስተምርዎት አይችልም. ሁልጊዜ የቋንቋ ስሪቶች እንደተዘመኑ እና አንዳንድ ባህሪያት በቀላሉ ሊጠፉ እንደሚችሉ ማስታወስ ጠቃሚ ነው. ስለዚህ፣ ሁሉም መፍትሄዎች ጠቃሚ ላይሆኑ ይችላሉ፣ ብዙውን ጊዜ የተፃፈው ኮድ በቀላሉ አይሰራም ወይም በስክሪኑ ላይ ማየት የሚፈልጉትን ውጤት አያመጣም።

የሚመከር: