javascript - 尝试使用php和ajax将数据输入mysql数据库而不刷新页面

Question

我的 html 页面动态创建文本区域。我正在尝试使用 Javascript、Ajax 和 PHP 将这些文本区域中的数据从页面输入到 mysql 中。每个文本区域在创建时都有一个唯一的 ID。 #num 按钮用于将文本输入数据库。这是我的 html 代码片段:

<form method="POST">
		<div id ="textFields" class="form-group"> 

            <!--align it all in the center-->
            <p align="center">

            <!--small break-->
            <br>
	
			
            <!--textarea-->
            <textarea id="note0" input type="text" name="content" placeholder="Enter note, max limit 200 words" class="form-control" rows="5"  style="width: 80%;overflow:auto;"></textarea>
                
         

                <!--end of p alignment-->
                </p>

        <!--End of textFields div-->
        </div>

        <!--div for buttons-->
        <div align="left">
            <button id="num" class="w3-button w3-large w3-circle w3-red w3-card-4"  onclick="return false">+</button>
        </div>
		</form>

单击 #num 按钮后，将调用一个 Javascript 函数，该函数与 Ajax 一起使用，以便页面不会刷新并在单击 #num 按钮时保持不变。这个函数应该(或者我希望的)将值传递到 php 页面，并在数据输入数据库后取回控制权。

$(document).ready(function(){
    var note_id = 0;
  

	//on the click of the submit button 
	$("#num").click(function(){
		
		//get the form values
		var inputField = $('<p align="center"><br><textarea id="note' + note_id + '" input type="text" name="content" placeholder="Enter note, max limit 200 words" class="form-control" rows="5" style="width: 80%;overflow:auto;"></textarea></p>');    

		$.ajax({
			type: "POST",
			url : "Savenotes.php",
			data : {
				content: $('#note'+note_id).serialize()
			 },
			success: function(response)
			{
				alert(response);
        
			}
		});
		
		note_id++;
	});
});

这是 Savenotes.php 文件，它将文本区域内容存储到数据库中:

$Content=$_POST['content'];

$sql_users="INSERT INTO notes(Contentdb) VALUES ('$Content')";
if (mysqli_query($connect,$sql_users))
{
	echo ('Note saved into the database.');
}
else
{
	echo ('Note could not be saved, Please try again!');
	header('Location:finalAppend.html');

}
?>

单击 #num 按钮后，我无法在数据库中获取与用户在网页文本区域中输入的数据相同的数据。它只显示每个条目的“content=”。如何获取用户输入的正确值？

Answer 1

$.ajax({
        type: "POST",
        url : "Savenotes.php",
        data : {
            content: $('#note'+note_id).val().serialize()
         },
        success: function(response)
        {
            alert(response);

        }
    });