php jquery onclick中的ajax帖子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20543722/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ajax post within jquery onclick
提问by Vereonix
I have a button which calls a modal box to fade into the screen saying a value posted from the button then fade off, this works fine using jquery, but I also want on the same click for value sent from the button to be posted to a php function, that to run and the modal box to still fade in and out.
我有一个按钮，它调用一个模态框来淡入屏幕，说一个从按钮发布的值然后淡出，这使用 jquery 工作正常，但我也希望同样点击从按钮发送的值发布到一个php 函数，运行和模式框仍然淡入和淡出。
I only have this to let my site know what js to use:
我只有这样才能让我的网站知道要使用什么 js：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
I'm still new so sorry for a rookie question, but will that allow ajax to run, or is it only for jquery?
我还是个新手，很抱歉有一个菜鸟问题，但这会允许 ajax 运行，还是仅适用于 jquery？
The current script I'm trying is: (Edited to be correctly formed, based on replies, but now nothing happens at all)
我正在尝试的当前脚本是：（根据回复编辑为正确格式，但现在什么也没发生）
<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>
Though with this the modal box doesn't even happen.
尽管这样，模态框甚至不会发生。
The php is, resersebook.php:
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);
}
?>
and to be thorough, the button is:
并且要彻底，按钮是：
<div class= "obutton feature2" data-id="<?php echo $bookID;?>"><button>Reserve Book</button></div>
I'm new to this and I've looked at dozens of other similar questions on here, which is how I got my current script, but it just doesn't work.
我是新手，我在这里查看了许多其他类似的问题，这就是我获得当前脚本的方式，但它不起作用。
Not sure if it matters, but the script with just the modal box that works has to be at the bottom of the html body to work, not sure if for some reason ajax needs to be at the top, but then the modal box wouldn't work, just a thought.
不确定它是否重要，但只有模态框的脚本必须在 html 正文的底部才能工作，不确定是否出于某种原因 ajax 需要在顶部，但模态框不会不工作，只是一个想法。
采纳答案by Minoru
Try this. Edited to the final answer.
尝试这个。编辑到最终答案。
button:
按钮：
<div class= "obutton feature2" data-id="<?php echo $bookID;?>">
<button class="reserve-button">Reserve Book</button>
</div>
script:
脚本：
<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:
<?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: The change to mysqliis minimal to your code, but strongly recommended.
PS#1：mysqli对您的代码的更改很小，但强烈推荐。
PS#2: The successon Ajax call doesn't mean the querywas successful. Only means that the Ajax transaction went correctly and got a satisfatory response. That means, it sent to the urlthe correct data, but not always the urldid the correct thing.
PS#2：successon Ajax 调用并不意味着query成功。仅表示 Ajax 事务正确进行并得到了满意的响应。这意味着，它发送到url正确的数据，但并不总是url做正确的事情。
回答by Wilfredo P
You Ajax is bad formed, you need the sucsses event. With that when you invoke the ajax and it's success it will show the response.
您的 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);
});
}
}
Edit:
编辑：
Another important point is data: "book_id="+book_id, that should be data: {"book_id":book_id},
另一个重要的一点是data: "book_id="+book_id，应该是data: {"book_id":book_id}，
回答by floriangosse
You have an error in your ajax definitions. It should be:
您的 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);
});
}
});
回答by Abhisek Mishra
$.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);
});
}
});
});
});
Try this
尝试这个
