Я искал весь день, чтобы найти способ вставить некоторые данные в мою базу данных, а затем показать новые данные в списке уже существующих данных на моей веб-странице.
Я знаю, что некоторые из моментов, которые я не могу сделать, могут быть основами, но я только начал изучать 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>