Estoy tratando de crear una aplicación de mensajería, cuando completo la entrada y hago clic en el botón Enviar, la función de éxito funciona, pero los datos no se envían a la página insertMessage.php .
$(document).ready(function(){ $("#button_send").on("click", function(){ $.ajax({ url:"insertMessage.php", method:"POST", data:{ fromUser: $("#fromUser").innerHTML, toUser: $("#toUser").innerHTML, message: $("#message_text").val() }, dataType:"text", success:function(data){ $("#message_text").val(""); } }); }); }); insertMessage.php Página:
<?php session_start(); include 'includes/config.php'; $fromUser = $_POST['fromUser']; $toUser = $_POST['toUser']; $message = $_POST['message']; $message = htmlspecialchars($messgae); $date_p1 = date("d/m/Y"); $date_p2 = date("h:i:sa"); $date = $date_p1." at ".$date_p2; $insert_message = "INSERT INTO users_messages (from_user, to_user, message, date_time) VALUES (?,?,?,?)"; $check_insert_message = $db->prepare($insert_message); $check_insert_message->execute([$fromUser, $toUser, $message, $date]); ?>Considere el siguiente fragmento.
$(function() { $("#buttonSend").click(function() { $.ajax({ url: "insertMessage.php", method: "POST", data: { fromUser: $("#fromUser").html(), toUser: $("#toUser").html(), message: $("#messageText").val() }, success: function(data) { $("#messageText").val(""); } }); }); }); #sendMessage label { display: inline-block; width: 80px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="sendMessage"> <div><label>From</label><span id="fromUser">Agent Smith</span></div> <div><label>To</label><span id="toUser">Tomas Anderson</span></div> <div><label>Message</label><input type="text" id="messageText" /></div> <button id="buttonSend">Send</button> </div>Esto debería funcionar con su PHP.
Me di cuenta de que estaba cambiando de Camel Humps a Underscores en su convención de nomenclatura de ID, es una mejor práctica usar uno u otro. Los cambié todos a Camel Humps.
Su evento de click no debería necesitar usar .on() a menos que los elementos no existan en DOM hasta más tarde. Así que cambié esto a devolución de llamada .click() .
No estaba claro por qué intentabas usar la propiedad innerHTML . Esta no es una propiedad de jQuery Objects. Así que cambio a usar .html() que recopilará el contenido HTML del objeto seleccionado.
Ver más: https://api.jquery.com/html/
Este método usa la propiedad
innerHTMLdel navegador.