AJAX-innsending av skjemaer og tilbakemelding
Bli fortrolig med å sende skjemadata asynkront via AJAX, gi brukeren tilbakemelding i sanntid og håndtere serversvar uten fullstendig omlasting av siden for en mer smidig brukeropplevelse.
AJAX-innsending av skjemaer og tilbakemelding er en gratis leksjon i jQuery Academy på CoddyKit. Dette er leksjon 3 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i jQuery Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i jQuery Academy inneholder totalt 3 leksjoner.
Smidige skjemaer med AJAX
Se for Dem å sende inn et skjema uten å laste inn hele siden på nytt! Det er magien ved å sende inn skjemaer med AJAX.
I stedet for å oppdatere hele siden lar AJAX Dem sende skjemadata til en server i bakgrunnen. Dette gir en langt smidigere og raskere brukeropplevelse, perfekt for kommentarer, registreringer eller raske oppdateringer.
Stoppe standardinnsendingen
Det første trinnet ved innsending av et AJAX-skjema er å hindre nettleserens standardatferd. Hvis De ikke gjør det, lastes siden inn på nytt som vanlig, og hensikten med AJAX forsvinner!
Dette gjør vi ved å kalle event.preventDefault() i skjemaets submit-behandler.
<form id="myForm">
<label for="username">Name:</label>
<input type="text" id="username" name="username" placeholder="Your name">
<button type="submit">Submit</button>
</form>
<div id="status"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#myForm').submit(function(event) {
event.preventDefault(); // Stop default form submission
$('#status').text("Form submission prevented!");
console.log("Form submission prevented!");
});
});
</script>Klargjøre skjemadata
Før vi sender skjemadata via AJAX, må vi pakke dem inn på riktig måte. jQuery-metoden .serialize() egner seg perfekt til dette!
- Den samler automatisk inn verdier fra alle input-, select- og textarea-elementer i skjemaet.
- Den koder dem som en URL-kodet streng (for eksempel
name=Alice&email=alice%40example.com). - Denne strengen er standardformatet for sending av skjemadata til en server.
<form id="dataForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" value="Bob">
<label for="email">Email:</label>
<input type="email" id="email" name="email" value="bob@example.com">
<button type="submit">Get Data</button>
</form>
<div id="output"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#dataForm').submit(function(event) {
event.preventDefault();
let formData = $(this).serialize();
$('#output').text("Serialized: " + formData);
console.log(formData); // name=Bob&email=bob%40example.com
});
});
</script>Sende AJAX-forespørselen
Når skjemadataene er serialisert, kan vi sende dem til serveren. jQuery tilbyr flere AJAX-metoder, men $.post() er en praktisk snarvei for å sende data med HTTP-metoden POST.
Metoden tar imot URL-en til serveren, de serialiserte dataene og en valgfri callback-funksjon som skal kjøres når forespørselen lykkes.
<form id="submitForm">
<label for="msg">Message:</label>
<input type="text" id="msg" name="message" value="Hello AJAX!">
<button type="submit">Send</button>
</form>
<div id="response"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#submitForm').submit(function(event) {
event.preventDefault();
let formData = $(this).serialize();
// Using a dummy API endpoint for demonstration
$.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
$('#response').text("Success! Server ID: " + data.id);
console.log("Server response:", data);
});
});
});
</script>Vise innlastingsindikator
Når en bruker klikker på send, forventer vedkommende et umiddelbart svar. Siden AJAX-forespørsler er asynkrone, oppstår det en forsinkelse. Det er derfor viktig å gi visuell tilbakemelding!
De kan vise meldingen «Laster inn ...» eller en spinner mens forespørselen behandles, og skjule den når svaret kommer.
<style>
#loading { display: none; color: gray; }
</style>
<form id="feedbackForm">
<label for="item">Item:</label>
<input type="text" id="item" name="item" value="New Widget">
<button type="submit">Add</button>
</form>
<div id="loading">Loading...</div>
<div id="status"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#feedbackForm').submit(function(event) {
event.preventDefault();
$('#loading').show(); // Show loading indicator
$('#status').text(''); // Clear previous status
let formData = $(this).serialize();
$.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
$('#loading').hide(); // Hide loading
$('#status').text("Item added with ID: " + data.id);
});
});
});
</script>Behandle vellykkede svar
Når serveren har behandlet skjemadataene, sender den vanligvis et svar tilbake. Dette kan være en bekreftelsesmelding, ID-en til en nyopprettet post eller oppdaterte data.
Callback-funksjonen for vellykket gjennomføring (det tredje argumentet i $.post()) mottar disse dataene, slik at De kan oppdatere brukergrensesnittet tilsvarende.
<form id="addTodoForm">
<label for="todoTitle">Todo:</label>
<input type="text" id="todoTitle" name="title" placeholder="New todo item">
<button type="submit">Add Todo</button>
</form>
<ul id="todoList"></ul>
<div id="message"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#addTodoForm').submit(function(event) {
event.preventDefault();
$('#message').text('Adding...');
let formData = $(this).serialize();
$.post("https://jsonplaceholder.typicode.com/todos", formData, function(todo) {
$('#message').text('Todo added!');
$('#todoList').append('<li>' + todo.title + ' (ID: ' + todo.id + ')</li>');
$('#addTodoForm')[0].reset(); // Clear form fields
});
});
});
</script>Elegant feilhåndtering
Ikke alle forespørsler lykkes. Nettverksproblemer, serverfeil eller ugyldige data kan føre til at en AJAX-forespørsel mislykkes. Det er viktig å håndtere slike feil på en god måte og informere brukeren.
For $.post() kan De kjede på en .fail()-metode. For $.ajax() kan De bruke callback-funksjonen error eller .fail()-metoden på det returnerte Deferred-objektet.
<form id="errorForm">
<label for="badData">Data:</label>
<input type="text" id="badData" name="data" value="bad value">
<button type="submit">Submit</button>
</form>
<div id="errorMessage" style="color: red;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#errorForm').submit(function(event) {
event.preventDefault();
$('#errorMessage').text('');
let formData = $(this).serialize();
// Simulating an error by posting to a non-existent endpoint
$.ajax({
url: "https://jsonplaceholder.typicode.com/nonexistent-endpoint", // Will cause a 404 error
type: "POST",
data: formData
})
.done(function(data) {
$('#errorMessage').text("Unexpected success!");
})
.fail(function(jqXHR, textStatus, errorThrown) {
$('#errorMessage').text("Error: " + textStatus + " - " + errorThrown);
console.error("AJAX Error:", textStatus, errorThrown);
});
});
});
</script>Tømme skjemaer etter innsending
Etter en vellykket innsending av et skjema gir det en god brukeropplevelse å tømme inndatafeltene. Dette hindrer utilsiktede nye innsendinger og gir et rent utgangspunkt for neste handling.
De kan bruke den innebygde DOM-metoden .reset() på skjemaelementet eller tømme verdiene i individuelle inndatafelt manuelt.
<form id="clearForm">
<label for="item">Item:</label>
<input type="text" id="item" name="item" value="Item A">
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" value="1">
<button type="submit">Add</button>
</form>
<div id="feedbackMsg" style="color: green;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#clearForm').submit(function(event) {
event.preventDefault();
$('#feedbackMsg').text('Submitting...');
let formData = $(this).serialize();
$.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
$('#feedbackMsg').text('Successfully added! ID: ' + data.id);
$('#clearForm')[0].reset(); // Clears all form fields
});
});
});
</script>Fullstendig AJAX-skjemaeksempel
La oss kombinere alle teknikkene vi har lært: hindre standardinnsendingen, serialisere dataene, sende AJAX-forespørselen, vise innlastingstilbakemelding, håndtere både vellykkede svar og feilsvar og til slutt tømme skjemaet.
Denne helhetlige fremgangsmåten sikrer en robust og brukervennlig opplevelse med AJAX-skjemaer.
<style>
#loader { display: none; color: blue; }
#result { margin-top: 10px; font-weight: bold; }
</style>
<form id="fullAjaxForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Register</button>
</form>
<div id="loader">Processing...</div>
<div id="result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#fullAjaxForm').submit(function(event) {
event.preventDefault(); // Stop default form submission
$('#loader').show(); // Show loading indicator
$('#result').text(''); // Clear previous results
let formData = $(this).serialize(); // Serialize form data
$.ajax({
url: "https://jsonplaceholder.typicode.com/users", // Dummy API endpoint
type: "POST",
data: formData,
dataType: "json" // Expect JSON response
})
.done(function(response) {
$('#result').css('color', 'green').text('Registration successful! ID: ' + response.id);
$('#fullAjaxForm')[0].reset(); // Clear form fields
})
.fail(function(jqXHR, textStatus, errorThrown) {
$('#result').css('color', 'red').text('Registration failed: ' + textStatus);
console.error("AJAX Error:", textStatus, errorThrown);
})
.always(function() {
$('#loader').hide(); // Always hide loading indicator
});
});
});
</script>Test forståelsen Deres
De har lært å sende inn skjemaer med AJAX og gi tilbakemelding i sanntid. La oss teste kunnskapene Deres!
Oppsummering: Smidige skjemainnsendinger
Gratulerer! De behersker nå innsending av skjemaer med AJAX og kan gi webapplikasjonene Deres smidige brukeropplevelser uten forstyrrende sideinnlastinger.
- De har lært å hindre standardatferd med
event.preventDefault(). - De har brukt
.serialize()til å klargjøre skjemadata for overføring. - De har implementert
$.post()eller$.ajax()for å sende data asynkront. - De har lagt til viktig tilbakemelding i sanntid for innlastings-, suksess- og feiltilstander.
- Til slutt har De lært å tømme skjemaer etter innsending for å gi et ryddig brukergrensesnitt.
Disse ferdighetene er avgjørende for å bygge moderne og responsive webskjemaer!
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 22
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «AJAX-innsending av skjemaer og tilbakemelding» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien jQuery Academy, inkludert «AJAX-innsending av skjemaer og tilbakemelding», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i jQuery Academy inneholder totalt 3 leksjoner.
Hva lærer jeg i «AJAX-innsending av skjemaer og tilbakemelding»?
Bli fortrolig med å sende skjemadata asynkront via AJAX, gi brukeren tilbakemelding i sanntid og håndtere serversvar uten fullstendig omlasting av siden for en mer smidig brukeropplevelse. Du øver på jQuery Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med jQuery Academy?
Ingen tidligere erfaring er nødvendig. jQuery Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 3.
Hvor lang tid tar leksjonen «AJAX-innsending av skjemaer og tilbakemelding»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne jQuery Academy-leksjonen?
Ja. Alle jQuery Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Dynamisk manipulering av skjemafelt
- Valideringslogikk på klientsiden
- AJAX-innsending av skjemaer og tilbakemelding