La biblioteca script.aculo.us es una biblioteca multinavegador que tiene como objetivo mejorar la interfaz de usuario de un sitio web. El Ajax.InPlaceEditor se utiliza para hacer que los elementos sean editables, lo que permite al usuario editar el contenido de la página y enviar los cambios al servidor.
La opción InPlaceEditor ajaxOptions se usa para definir las opciones especificadas para todas las llamadas AJAX. En palabras simples, podemos controlar el tipo de solicitud realizada durante el envío del texto después de editar el editor en el lugar.
Sintaxis:
{ ajaxOptions: object}
Valores:
- objeto: Este es un objeto que contiene las opciones de ajax.
Ejemplo:
Para demostrar el uso de esta función, consulte el siguiente código. La parte JavaScript del código creará un editor en el lugar para elementos específicos. Cree un archivo llamado “test.html” que usaremos para realizar la solicitud. Este “test.html” contendrá un texto simple GeeksforGeeks . Al hacer clic en Click me , verá el editor en el lugar. Simplemente haga clic en Aceptar para realizar la solicitud y luego verificaremos el tipo de solicitud desde la pestaña Red en las Herramientas de desarrollo de Chrome. Cuando haga clic en Aceptar , se creará una solicitud y aparecerá un «test.html» en la pestaña Red, como se muestra en las capturas de pantalla a continuación.
Nota:
Use un servidor para ejecutar el archivo con capacidades ajax. En este artículo, estamos usando un servidor PHP.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Include the required scripts -->
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js?load = effects,controls">
</script>
</head>
<body>
<p id="editme1">Click me for post request</p>
<p id="editme2">Click me for get request</p>
<!-- Script for the JavaScript part to
initialize the objects -->
<script type="text/javascript">
new Ajax.InPlaceEditor('editme1', 'test.html',
{ ajaxOptions: { method: 'post' } });
new Ajax.InPlaceEditor('editme2', 'test.html',
{ ajaxOptions: { method: 'get' } });
</script>
</body>
</html>
Salida para solicitud de publicación:
Salida para obtener solicitud:
Puede ver que el método de solicitud es POST para el primero y GET para el segundo.
test.html El siguiente código es el contenido del archivo «test.html» utilizado en el código HTML anterior.
<!DOCTYPE html> <html> <body> GeeksforGeeks </body> </html>