Блог

Делимся с Вами своими знаниями и новостями

11 July, 2018

Formulario de comentarios de Ajax sin volver a cargar las páginas

El formulario de comentarios de Ajax funciona sin reiniciar las páginas para que el usuario permanezca donde escribió el mensaje. El formulario se implementará con HTML, CSS, PHP, JavaScript con la tecnología Ajax. En realidad, esto permitirá que el formulario obtenga datos del script PHP y no reinicie la página del sitio.

Vamos a empezar de inmediato. Un ejemplo implementado con éxito se puede ver aquí – mst-info.ru no.

Formulario de comunicación al sitio

En primer lugar, vamos a añadir el código en HTML. Puede usar este script y en varios CMS, pero no requerirá mucho, funciona muy rápido. Aquí está nuestra forma.

<div id="fields">
<form id="my_form_contact" action="send.php" method="POST">
<input name="name" placeholder="nombre*" required>
<input name="email" placeholder="E-mail*" required>
<input name="mytel" placeholder="Teléfono">
<textarea name="message" placeholder="Mensaje*" required></textarea>
<input type="text" name="captcha_code" placeholder="*Tres multiplicar por cuatro iguales?" required>
<button type="reset">Restablecer la forma</button>
<button type="submit">Enviar mensaje</button>
</form>
</div>
<div id="note"></div>

1

2

3

4

5

6

7

8

9

10

11

12

<button type="reset">Restablecer la forma</button>

<button type="submit">Enviar mensaje</button>

</form>

</div>

La forma de retroalimentación es normal. Supongo que Ya está familiarizado con CSS y diseñe el formulario usted mismo, si no sabe lo que es, primero eche un vistazo a CSS. Así que aquí está la forma en que la arreglaste, es hermosa, pero no funciona. Pero eso no es nada, lo arreglaremos ahora.

Voy a correr un poco hacia adelante, en esta forma hice un pequeño cheque. A veces la gente lo pregunta. El formulario utiliza el atributo required, que es necesario para indicar al navegador que este campo es obligatorio para rellenar. Pero también haremos nuestro chequeo adicional. Como se puede ver en el formulario, al hacer clic en el botón, nos enviará al controlador send.php. Por cierto, en su forma, haga el enlace correcto.

Controlador de formulario de comentarios con Ajax sin volver a cargar las páginas

Explicación de la forma a continuación. La variable $sub es el tema del mensaje donde se especifica mi correo electrónico, especifique el suyo para que todo funcione correctamente. Este script acepta los datos enviados desde nuestro formulario de comentarios y los revisa. Puede agregar campos adicionales de manera similar a estos, así como realizar comprobaciones de datos y así sucesivamente.

<?php
$post = (!empty($_POST)) ? true : false;
if($post) {
  $name = $_POST['name'];
  $email = $_POST['email'];
  $mytel = $_POST['mytel'];
  $message = $_POST['message'];
  $captcha_code = $_POST['captcha_code'];
  $error = '';
  if(!$name) {$error .= 'Especifique su nombre. ';}
  if(!$email) {$error .= 'Especifique el correo electrónico. ';}
  if($captcha_code != 12) {$error .= 'El código de validación se introduce incorrectamente o está vacío. ';}
  if(!$message || strlen($message) < 1) {$error .= 'Escriba un mensaje. ';}
  if(!$error) {
    $address = "no-reply@gmail.com";
    $sub = "El asunto aquí";
    $mes = "Nombre: ".$name."\n\nE-mail: ".$email."\n\nTeléfono: ".$mytel."\n\nMensaje: ".$message."\n\n";
    $send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email");
    if($send) {echo 'OK';}
  }
  else {echo '<div class="err">'.$error.'</div>';}
}
?>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<?php

$post = (!empty($_POST)) ? true : false;

if($post) {

$name = $_POST['name'];

$email = $_POST['email'];

$mytel = $_POST['mytel'];

$message = $_POST['message'];

$captcha_code = $_POST['captcha_code'];

$error = '';

if(!$name) {$error .= 'Especifique su nombre. ';}

if(!$email) {$error .= 'Especifique el correo electrónico. ';}

if($captcha_code != 12) {$error .= 'El código de validación se introduce incorrectamente o está vacío. ';}

if(!$message || strlen($message) < 1) {$error .= 'Escriba un mensaje. ';}

if(!$error) {

$address = "no-reply@gmail.com";

$sub = "El asunto aquí";

$mes = "Nombre: ".$name."\n\nE-mail: ".$email."\n\nTeléfono: ".$mytel."\n\nMensaje: ".$message."\n\n";

$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email");

if($send) {echo 'OK';}

}

else {echo '<div class="err">'.$error.'</div>';}

}

?>

Preste mucha atención al resultado del controlador, es muy importante. El script en el resultado exitoso muestra los datos, y nuestro controlador ajax, ahora lo escribimos, estos datos se comprueban, así que aconsejo dejar todo como está, quiero decir, OK y Error.

El último toque

El formulario de comentarios ya funcionará, pero nos enviará aquí.php. Por lo tanto, debe incluir un poco de magia y hacer las cosas bien. Para hacer esto, conecte la biblioteca jQuery si aún no lo ha hecho. Conéctelo antes de que se cierre la etiqueta < / head>. Código abajo.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Después de conectar este script a nuestro sitio, creamos un tercer archivo, o escribimos directamente en el código, debajo de jQuery insertamos el siguiente código.

jQuery(document).ready(function($) {
	$("#my_form_contact").submit(function() {
		var str = $(this).serialize();
		$.ajax({
			type: "POST",
			url: "send.php",
			data: str,
			success: function(msg) {
				if(msg == 'OK') {
					result = '<div class="ok">Mensaje enviado</div>';
					$("#fields").hide();
				}
				else {result = msg;}
				$('#note').html(result);
			}
		});
		return false;
	});
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

jQuery(document).ready(function($) {

$("#my_form_contact").submit(function() {

var str = $(this).serialize();

$.ajax({

type: "POST",

url: "send.php",

data: str,

success: function(msg) {

if(msg == 'OK') {

result = '<div class="ok">Mensaje enviado</div>';

$("#fields").hide();

}

else {result = msg;}

$('#note').html(result);

}

});

return false;

});

Eso es todo. Preste especial atención a la ruta del archivo send.php y escríbalo según Su ubicación de este archivo en el servidor. En el resto de la forma se ha demostrado perfectamente. Y funciona bien. Preguntas? Si es así, a continuación hay comentarios sobre el artículo. Escribidse. Me importa tu opinión.

P.S. Solución al problema de enviar archivos a través del formulario AJAX

Amistad. Muchos me hacen preguntas personales que el formulario no funciona si, por ejemplo, enviar un archivo adjuntándolo al formulario. Realmente lo es. El método serialize() no funcionará. Por lo tanto, use en lugar del código anterior siguiente, todo lo demás permanece sin cambios.

jQuery(document).ready(function($) {
var form = document.forms.commentForm;

			var formData = new FormData(form);  

			var xhr = new XMLHttpRequest();
			xhr.open("POST", "send.php");

			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4) {
					if(xhr.status == 200) {
						data = xhr.responseText;
						if(data == "true") {
							$(".sending").replaceWith("<p>Es costumbre!<p>");
						} else {
							$(".sending").replaceWith("<p >Error! Página de actualización...<p>");
						}
					}
				}
			};
			
			xhr.send(formData);
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

jQuery(document).ready(function($) {

var form = document.forms.commentForm;

var formData = new FormData(form);

var xhr = new XMLHttpRequest();

xhr.open("POST", "send.php");

xhr.onreadystatechange = function() {

if (xhr.readyState == 4) {

if(xhr.status == 200) {

data = xhr.responseText;

if(data == "true") {

$(".sending").replaceWith("<p>Es costumbre!<p>");

} else {

$(".sending").replaceWith("<p >Error! Página de actualización...<p>");

}

};

xhr.send(formData);

}

No olvide que puede emitir cualquier mensaje que forme su archivo PHP. Escribe sobre todas las preguntas.

Метки: Ajax, Formato de retroalimentación, JQuery

Aumento suave de la imagen al pasar el CSS

Como hacer un texto emergente sobre una imagen en html?

Contact Us

You are used to see a contact form here. Almost everyone does it. But while examining the behavior of people, we came to the conclusion that the form is completely unnecessary. In any case, it all comes down to discuss your project on WhatsApp. Why should we waste your time filling out various forms?

The last articles