jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS , o más precisamente, el Modelo de objetos del documento (DOM) y JavaScript . Al elaborar los términos, jQuery simplifica el recorrido y la manipulación de documentos HTML, el manejo de eventos del navegador, lasanimaciones DOM , las interacciones Ajax y el desarrollo de JavaScript entre navegadores.
La función $.ajax() se usa para llamadas ajax usando jQuery.
Sintaxis:
$.ajax({name:value, name:value, ... })
Podemos enviar un formulario por ajax usando el botón Enviar y mencionando los valores de los siguientes parámetros.
- tipo: Se utiliza para especificar el tipo de solicitud.
- url: Se utiliza para especificar la URL a la que enviar la solicitud.
- data: Se utiliza para especificar los datos que se enviarán al servidor.
Ejemplo:
HTML
<!Doctype html>
<html>
<head>
<title>JQuery AJAX Call</title>
<!--Include JQuery Library -->
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
<script>
// When DOM is loaded this
// function will get executed
$(() => {
// function will get executed
// on click of submit button
$("#submitButton").click(function(ev) {
var form = $("#formId");
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(),
success: function(data) {
// Ajax call completed successfully
alert("Form Submited Successfully");
},
error: function(data) {
// Some error in ajax call
alert("some Error");
}
});
});
});
</script>
</head>
<body>
<form id='formId' action=''> Name:
<input type='text'
id='nm'
name='nm'>
</input>
<br> Student ID:
<input type='text'
id='studentId'
name='studentId'>
</input>
<br> Contact No. :
<input type='text'
id='contactNumber'
name='contactNumber'>
</input>
<br>
<button type='submit'
id='submitButton'>
Submit
</button>
</form>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por harshsethi2000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA