[英]ajax post within jquery onclick
我有一个按钮,它调用一个模态框淡入屏幕,说明从按钮发布的值然后淡出,这可以正常使用jquery,但我也希望在相同的点击值发送从按钮发布到一个php函数,即运行和模态框仍然淡入淡出。
我只有这个让我的网站知道要使用的js:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
我还是新人,对于一个菜鸟问题感到抱歉,但这会让ajax运行,还是仅仅适用于jquery?
我正在尝试的当前脚本是:(根据回复编辑正确形成,但现在根本没有任何事情发生)
<script>
$('button').click(function()
{
var book_id = $(this).parent().data('id'),
result = "Book #" + book_id + " has been reserved.";
$.ajax
({
url: 'reservebook.php',
data: "book_id="+book_id,
type: 'post',
success: function()
{
$('.modal-box').text(result).fadeIn(700, function()
{
setTimeout(function()
{
$('.modal-box').fadeOut();
}, 2000);
});
}
});
});
</script>
尽管如此,模态框甚至都没有发生。
php是,resersebook.php:
<?php
session_start();
$conn = mysql_connect('localhost', 'root', '');
mysql_select_db('library', $conn);
if(isset($_POST['jqbookID']))
{
$bookID = $_POST['jqbookID'];
mysql_query("INSERT INTO borrowing (UserID, BookID, Returned) VALUES ('".$_SESSION['userID']."', '".$bookID."', '3')", $conn);
}
?>
并且要彻底,按钮是:
<div class= "obutton feature2" data-id="<?php echo $bookID;?>"><button>Reserve Book</button></div>
我是新手,我在这里看了几十个类似的问题,这就是我如何得到我当前的剧本,但它不起作用。
不确定它是否重要,但只有工作模式框的脚本必须在html主体的底部才能工作,不确定是否由于某种原因ajax需要在顶部,但是模态框不会'工作,只是一个想法。
试试这个。 编辑到最后的答案。
按钮 :
<div class= "obutton feature2" data-id="<?php echo $bookID;?>">
<button class="reserve-button">Reserve Book</button>
</div>
脚本 :
<script>
$('.reserve-button').click(function(){
var book_id = $(this).parent().data('id');
$.ajax
({
url: 'reservebook.php',
data: {"bookID": book_id},
type: 'post',
success: function(result)
{
$('.modal-box').text(result).fadeIn(700, function()
{
setTimeout(function()
{
$('.modal-box').fadeOut();
}, 2000);
});
}
});
});
</script>
reservebook.php :
<?php
session_start();
$conn = mysql_connect('localhost', 'root', '');
mysql_select_db('library', $conn);
if(isset($_POST['bookID']))
{
$bookID = $_POST['bookID'];
$result = mysql_query("INSERT INTO borrowing (UserID, BookID, Returned) VALUES ('".$_SESSION['userID']."', '".$bookID."', '3')", $conn);
if ($result)
echo "Book #" + $bookId + " has been reserved.";
else
echo "An error message!";
}
?>
PS#1 :对mysqli
的更改对您的代码来说很小,但强烈建议。
PS#2 :Ajax调用的success
并不意味着query
成功。 只表示Ajax事务正确进行并得到满意的响应。 这意味着,它向url
发送了正确的数据,但并不总是url
做了正确的事情。
你Ajax形成不好,你需要sucsses事件。 有了它,当你调用ajax并且它成功时它将显示响应。
$.ajax
({
url: 'reserbook.php',
data: {"book_id":book_id},
type: 'post',
success: function(data) {
$('.modal-box').text(result).fadeIn(700, function()
{
setTimeout(function()
{
$('.modal-box').fadeOut();
}, 2000);
});
}
}
编辑:
另一个重点是data: "book_id="+book_id
,应该是data: {"book_id":book_id}
,
您的ajax定义中有错误。 它应该是:
$.ajax
({
url: 'reserbook.php',
data: "book_id="+book_id,
type: 'post',
success: function()
{
$('.modal-box').text(result).fadeIn(700, function()
{
setTimeout(function()
{
$('.modal-box').fadeOut();
}, 2000);
});
}
});
$.ajax
({
url: 'reservebook.php',
data: {
jqbookID : book_id,
},
type: 'post',
success: function()
{
$('.modal-box').text(result).fadeIn(700, function()
{
setTimeout(function()
{
$('.modal-box').fadeOut();
}, 2000);
});
}
});
});
试试这个
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.