отправлять данные в MySQL с помощью AJAX + jQuery + PHP

Я искал весь день, чтобы найти способ вставить некоторые данные в мою базу данных, а затем показать новые данные в списке уже существующих данных на моей веб-странице.

Я знаю, что некоторые из моментов, которые я не могу сделать, могут быть основами, но я только начал изучать Javascript / AJAX, поэтому у меня есть ограниченное знание.

Я думаю, что 70% работы сделано, я могу отображать данные на своей веб-странице с помощью AJAX / jQuery / PHP, но я не могу понять, как отправлять данные из «textarea» в мою базу данных, используя снова AJAX / jQuery / PHP ,

Пока это то, что я сделал:

index.php
На этой странице, я полагаю, что мне нужно поставить onClick: function () на кнопку, но я не знаю, где поставить эту функцию и что она должна делать именно так.

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>TP2</title> <script src="jquery-1.10.2.min.js"></script> </head> <body> <script src="javascript.js"></script> Message: <input type="text" id="message-content"> <input type="button" id="message-submit" value="Envoyer"> <div id="output" align="center"> </div> </body> </html> 

javascript.js
Эта страница содержит код AJAX, который отображает мои данные в #output div. Я просто не знаю, что помещать в «данные: {}», поэтому содержимое моего текстового поля отправляется в мой php-файл.

 $.ajax({ url: "messages.php", type: "POST", async: true, data: { WHAT GOES HERE ? }, dataType: "html", success: function(data) { $('#output').html(data); }, }); 

messages.php
Я знаю, что запрос INSERT пойдет сюда, но я не могу понять, как получить значение из POST моего текстового поля.

 <?php $host = "localhost"; $user = "root"; $pass = "root"; $databaseName = "myDataBaseName"; $tableName = "comments"; $con = mysql_connect($host,$user,$pass); $dbs = mysql_select_db($databaseName, $con); $result = mysql_query("SELECT * FROM $tableName ORDER BY date DESC LIMIT 0 , 10 "); $data = array(); while ($row = mysql_fetch_array($result)) { echo $row['message']." - ".$row['date']; echo "<br />"; } ?> 

Вы можете отправить что-нибудь в этом свойстве. Попробуйте следующее: js

 $.ajax({ url: "messages.php", type: "POST", data: 'show=content', success: function(data) { $('#output').html(data); }, }); 

messages.php

 if(isset($_POST['show']) && $_POST['show']=='content') { // rest of your code goes here.. } 

Еще кое-что. Используйте MySQLi вместо MySQL, поскольку теперь это устаревшее расширение.

  data: {'messagecontent': $("#message-content").val()}, 

Вот что говорит Док:

data Тип: PlainObject или String

Простой объект или строка, которая отправляется на сервер с запросом.

Вот информация о Plain Object: http://api.jquery.com/Types/#PlainObject

См. Следующий пример использования:

 var formData = "name=ravi&age=31"; //Name value Pair 

или

 var formData = {name:"ravi",age:"31"}; //Array $.ajax({ url : "messages.php", type: "POST", data : formData, success: function(data, textStatus, jqXHR) { //data - response from server }, error: function (jqXHR, textStatus, errorThrown) { }, }); 

вы можете использовать onclick или использовать функцию jQuery .click для кнопки …

вы бы поместили это в теги скриптов, обычно в свою голову или внутри документа.

 $("#message-submit").click(function() { //in here we can do the ajax after validating the field isn't empty. if($("#message-content").val()!="") { $.ajax({ url: "messages.php", type: "POST", async: true, data: { message:$("#message-content").val() }, //your form data to post goes here as a json object dataType: "html", success: function(data) { $('#output').html(data); }, }); } else { //notify the user they need to enter data } }); 

для messages.php значение вашего AJAX POST теперь будет доступно для вашего PHP в переменной $ _POST ['message']

 $sql = "INSERT INTO tableName (messages) VALUES ('".$_POST['messages']."')"; 

Я смог получить вышеуказанный код, работающий со ссылкой, вместо текстового поля ввода и кнопки с этими настройками:

 <script type="text/javascript"> function msg(intValue) { var x = intValue; $.ajax({ url: "messages.php", type: "POST", data: 'message=' + x, success: function(data) { $('#output').html(data); }, }); } </script> 

по ссылке, которую я имел:

 <a href="#" id="message-content" onclick="msg('fl')">Florida</a>