Inserindo um registro de banco de dados de um formulário HTML com formulários jQuery + AJAX - php, jquery, ajax

Inserir um registro de banco de dados de um formulário HTML com jQuery + AJAX é o que estou tentando fazer, mas não parece funcionar para mim.

O HTML parece com isso:

        <form method="post" id="message-form">
<textarea id="new-message" name="message" placeholder="Nieuw bericht"></textarea>
<input type="hidden" id="message-sender" name="sender" value="<?=$_SESSION["user_id"]?>">
<input type="hidden" id="message-recipient" name="recipient" value="<?=$aConversationPartner["id"]?>">
<input type="submit" name="submit-message" id="send-message" value="Verstuur bericht">
</form>

O código jQuery se parece com isto:

       $("#send-message").click(function (e) {
e.preventDefault();
if($("#new-message").val()==="")
{
alert("Uw bericht is leeg!");
return false;
}

var myData = "message="+ $("#new-message").val() + "&sender=" + $("#message-sender").val() + "&recipient=" + $("#message-recipient").val(); //build a post data structure
jQuery.ajax({
type: "POST",
url: "sendmessage.php",
dataType:"text",
data:myData,
success:function(response){

console.log("great succes");

}
});
});

sendmessage.php parece com isso:

<?

require_once("config.php");
require_once("lib.php");

sendMessage($_POST["sender"], $_POST["recipient"], $_POST["message"], 1);

?>

A função php sendMessage funciona perfeitamente se eu usá-lo sem AJAX, então esse não seria o problema. O que é muito estranho é que eu não recebo nenhum erro de console console.log("great succes"); é demitido. Eu sou novo para jQuery + AJAX e desesperado por uma resposta. Por favor, dê-me uma resposta que eu possa entender e implementar.

Respostas:

1 para resposta № 1

Você deve colocar seus dados em um objeto JavaScript.

substituir

var myData = "message="+ $("#new-message").val() + "&sender=" + $("#message-sender").val() + "&recipient=" + $("#message-recipient").val();

de

var myData = {
message: $("#new-message").val(),
sender: $("#message-sender").val(),
recipient: $("#message-recipient").val()
};

---

1 para resposta № 2

Você não está escapando dos valores em sua string de consulta. Há duas maneiras fáceis de fazer isso com jQuery:

1. Usar var myData = $("#message-form").serialize(); já que você está enviando todos os valores do formulário.

2. Coloque os parâmetros em um objeto:

   var myData = {
   message: $("#new-message").val(),
   sender: $("#message-sender").val(),
   recipient: $("#message-recipient").val()
   };
   

A maneira simples de Javascript é chamar encodeURIComponent:

var myData = "message="+ encodeURIComponent($("#new-message").val()) +
"&sender=" + encodeURIComponent($("#message-sender").val()) +
"&recipient=" + encodeURIComponent($("#message-recipient").val());

---