Я хочу, чтобы пользователь заполнил его. Отправьте его, сохраните в базе данных, а затем используйте jquery, чтобы он отображался на той же странице перед ними. Прямо сейчас я могу получить его для отправки в базу данных, но он открывается на другой странице (/data.php) для отправки. Кроме того, я настроен на случайное, потому что я не знаю, как получить точное сообщение, отправленное пользователем для отображения.
Вот мой файл data.php:
<?php $con = mysql_connect("*****", "******", "******"); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("textwall", $con); $sql="INSERT INTO textwalltable (story) VALUES ('$_POST[story]')"; if (!mysql_query($sql,$con)) { die('Error: ' . mysql_error()); } echo "1 record added"; $sql = "SELECT * FROM textwalltable ORDER BY RAND() LIMIT 1;"; $query = mysql_query( $sql ); while($row = mysql_fetch_array($query)) { echo $row['story']; } mysql_close($con); ?> и мою страницу HTML:
<html> <head> <title>testing</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="jquery.js"><\/script>')</script> <script type="text/javascript"> function loadData() { $("#txtHint").load("data.php"); } </script> </head> <body> <form action="data.php" method="post" onsubmit="loadData()"> <div> <label for="comment">Type here:</label> <textarea id="story" name="story" rows="2" cols="20"> </textarea> <div id="txtHint"></div> </div> <div> <div><input type="submit" value="Submit" class="submit"/></div> </form> </body>
Вот работа:
1) Подача запросов пользователей.
2) Вы собираете необходимую информацию из DOM. Вы AJAX информацию на серверный скрипт, который вводит эту информацию в базу данных.
3) Вы используете JQuery для вставки информации, однако вы хотите отобразить ее в DOM.
4) Удалите все html, которые вам больше не нужны на странице, если это необходимо.
С точки зрения кода вы захотите взглянуть на функции ajax или post JQuery для вызова AJAX.
Вы можете использовать функцию javascript (используя jquery) для обработки этих событий. Этот метод не использует кнопку, поэтому вам нужно будет создать свою собственную кнопку, которая вызовет следующую функцию:
function postPage() { $.post("post.php", $("#form_id").serialize(), function(){ $("#display_id").load('display.php'); }); }
Вам нужно будет обрабатывать значения post в этом случае с помощью «test.php», а затем содержимое, которое вы хотите отобразить обратно пользователю после публикации в display.php. Содержимое display.php будет размещено внутри div / container с идентификатором «display».
Вот еще один способ: если вы используете функцию serialize, встроенную в jquery, вместе с $ .post, вам не придется писать много кода.
html-форму и html, отображающие сообщения:
<form action="data.php" method="post" class="commentForm"> <div> <label for="comment">Type here:</label> <textarea id="story" name="story" rows="2" cols="20"> </textarea> <div id="txtHint"></div> </div> <div> <div><input type="submit" value="Submit" class="submit"/></div> </form> <ul class="messages"> <li>Some old message</li> <li>Some other old message</li> </ul>
jquery для отправки новых сообщений на ваш сервер с клиента и размещения нового сообщения в DOM и сброса html-формы
//bind a click even to the submit $('.commentForm input[type=submit]').click(function(){ $(this).closest('form').find('input[type=submit]').value('Submitting'); $.post( $(this).closest('form').attr('action'), $(this).closest('form').serialize(), function(responseFromServer){ //get the message from the html form (don't need to send it back from the server) var message = $(this).closest('form').find('textarea'); $('.messages').append('<li>'+message+'</li>'); //resetting the html form $(this).closest('form').find('textarea').html(''); $(this).closest('form').find('input[type=submit]').value('Submit'); } ); //prevent the form from actually sending in the standard fashion by returning false return false; });.//bind a click even to the submit $('.commentForm input[type=submit]').click(function(){ $(this).closest('form').find('input[type=submit]').value('Submitting'); $.post( $(this).closest('form').attr('action'), $(this).closest('form').serialize(), function(responseFromServer){ //get the message from the html form (don't need to send it back from the server) var message = $(this).closest('form').find('textarea'); $('.messages').append('<li>'+message+'</li>'); //resetting the html form $(this).closest('form').find('textarea').html(''); $(this).closest('form').find('input[type=submit]').value('Submit'); } ); //prevent the form from actually sending in the standard fashion by returning false return false; });
PHP
//get the post variable and make it safe for inputting into the db $message = mysql_real_escape_string(html_entities($_POST['story'])); if(!empty($message)){ //assuming you have a db connection $insert_query = mysql_query("INSERT INTO textwalltable VALUES($message)"); echo 'message entered'; } else { echo 'no message'; }