如何让用户提交表单中的文本并将其AJAX输入到db并显示在同一页面上? [英] How to have user submit text in form and AJAX it to enter to db and show up on same page?
问题描述
我希望用户填写它.提交它，将其存储到数据库中，然后使用jquery将其显示在它们前面的同一页面上.现在，我可以将其发送到数据库，但在提交时会在另一个页面(/data.php)中打开.另外，我将其设置为随机，因为我不知道如何获取用户刚刚发送回显示的确切帖子.
I want the user to fill it out. Submit it, have it store into the database and then use jquery to have it show up on the same page in front of them. Right now I can get it to send to the database but it opens up in another page (/data.php) on submit. Also I have it set to random because I don't know how to get the exact post just sent by the user back to display.
这是我的data.php文件:
Here is my data.php file:
<?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)用户点击表单提交.
1) User hits form submit.
2)您从DOM收集了必要的信息.您可以将信息AJAX到服务器端脚本中，然后将该信息输入数据库中.
2) You gather necessary information from DOM. You AJAX the information to a server-side script that enters that info into the database.
3)您可以使用JQuery插入信息，但是要将其显示在DOM中.
3) You use JQuery to insert the information however you want to display it into the DOM.
4)如有必要，请删除页面上不再需要的所有html.
4) Remove whatever html you no longer need on the page if necessary.
在代码方面，您将需要查看AQuery调用的JQuery的ajax或post函数.
In terms of code you are going to want to look at JQuery's ajax or post functions for the AJAX call.
这篇关于如何让用户提交表单中的文本并将其AJAX输入到db并显示在同一页面上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
