我正在制作一个简单的墙贴,并且很难解决问题。我希望它发布而不必重新加载页面(如Facebook帖子)。当我点击提交时,什么也没发生。页面重新加载,不显示任何帖子,并且没有任何内容插入数据库。我无法弄清楚为什么。有什么建议吗?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
<HEAD>
<script type="text/javascript" src="js/jquery.js"> </script>
</HEAD>
<BODY>
<form id="submit_wall">
<label for="message_wall">Share your message on the Wall</label>
<input type="text" id="message_wall" />
<button type="submit">Post to wall</button>
</form>
<ul id="wall">
</ul>
<script type="text/javascript">
$(document).ready(function(){
$("form#submit_wall").submit(function() {
var message_wall = $('#message_wall').attr('value');
$.ajax({
type: "POST",
url: "insert.php",
data:"message_wall="+ message_wall,
success: function(){
$("ul#wall").prepend("<li style="display: none;">"+message_wall+"</li>");
$("ul#wall li:first").fadeIn();
}
});
return false;
});
});
</script>
</body>
insert.php只是一个简单的数据库输入:
<?php
if(isset($_POST['message_wall'])){
/* Connection to Database */
$link = mysql_connect($host, $un, $pw) or die("Couldn't make connection.");
@mysql_select_db($db, $link) or die("Couldn't select database");
/* Remove HTML tag to prevent query injection */
$message = strip_tags($_POST['message_wall']);
$sql = 'INSERT INTO wall ("message") VALUES( "'.$message.'")';
mysql_query($sql);
echo $message;
} else { echo '0'; }
?>
答案 0 :(得分:1)
首先,这不是一个问题。但我想指出的是你应该使用
var message_wall = $('#message_wall').val();
而不是
var message_wall = $('#message_wall').attr('value');
除此之外,我没有看到任何可能出错的东西。请自己解释一下
这是“墙贴”部分。您必须添加ajax调用
编辑:
$.ajax({
type: "POST",
url: "insert.php",
data:{'message_wall':message_wall}, /* This is the line i've modified */
success: function(){
$("ul#wall").prepend("<li style="display: none;">"+message_wall+"</li>");
$("ul#wall li:first").fadeIn();
}
});
答案 1 :(得分:1)
的index.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
<HEAD>
<script type="text/javascript" src="js/jquery.js"></script>
</HEAD>
<BODY>
<label for="message_wall">Share your message on the Wall</label>
<form name="post" id="post" name="post">
<input type="text" id="message_wall" name="message_wall"/>
<input type="submit" id="submitbtn" value="Post to wall"/>
</form>
<ul id="wall">
</ul>
<script type="text/javascript">
$(document).ready(function(){
$('#submitbtn').click(function() {
var message_wall = $('#message_wall').val();
$.ajax({
type: "POST",
url: "insert.php",
data:"message_wall="+ message_wall,
success: function(){
var $d=$("<li>"+message_wall+"</li>").fadeIn(500,function() {
document.post.reset();
});
$("ul#wall").prepend($d);
}
});
return false;
});
});
</script>
insert.php: (名称,密码和数据库都是正确的。我已经对它们进行了三重检查)
<?php
if(isset($_POST['message_wall'])){
/* Connection to Database */
$link = mysql_connect("localhost", "******", "******") or die("Couldn't make connection.");
@mysql_select_db("*******", $link) or die("Couldn't select database");
/* Remove HTML tag to prevent query injection */
$message = strip_tags($_POST['message_wall']);
$sql = 'INSERT INTO wall ("message") VALUES( "'.$message.'")';
mysql_query($sql);
echo $message;
} else { echo 'fail'; }
?>
答案 2 :(得分:0)
<input type="text" id="message_wall" name='message_wall' /> // you can use "name" attribute and "serialize()" method
JS:
data: $(this).serialize();
success: function(data){ // pass the data to your success callback
$("ul#wall").prepend("<li style='display: none;'>"+data+"</li>"); // correct the quotation marks