My PHP page
<ul id="upvote-the-image">
<li><a href="javascript:return false;" rel="50" id="upvote">Upvote</a><img src="image.png" /></li>
</ul>
当前已成功将变量发送到 JavaScript
$("#upvote").each(function(index) {
var upthis = $(this).attr("rel");
var plusone = upthis;
$.post("upvote.php", {
'plusone': plusone
});
alert(plusone);
});
(代码中的警报用于测试)我有多个使用 rel 标签的图像。我希望每个人都能够在不加载新页面的情况下在页面上获得赞成票,并显示他们在页面上投了赞成票。
我的问题和问题:我的下一步是什么?我只想知道如何将值发送到赞成.php。我知道如何使用mysql来添加赞成票,只是不知道如何将值发送到赞成.php,或者即使我的javascript代码正确打开了页面。
谢谢
我认为你需要这样的东西:
<ul id="upvote-the-image">
<li><span rel="50" id="upvote">Upvote</span><img src="image.png" /></li>
</ul>
<span id="result"></span>
$("#upvote").click(function(index) {
var upthis = $(this).attr("rel");
var oOptions = {
url: upvote.php, //the receiving data page
data: upthis, //the data to the server
complete: function() { $('#result').text('Thanks!') } //the result on the page
};
$.ajax(oOptions);
}
你不需要锚点,我改变了一个跨度,你可以在浏览器中使用 F12 测试 asyc 连接
你的javascript永远不会打开php页面,它只是向它发送数据,并接收一个带有响应的http标头。 您的 php 脚本应该监视$_POST['plusone']
并相应地处理数据库处理。 下一步是在$.post
函数中编写回调,我建议在学习时将其更改为完整的 ajax 函数,因为它更容易理解和查看正在发生的事情的所有部分。
$.ajax({
type: 'POST',
url: "upvote.php",
data: {'plusone': plusone},
success: function(IDofSelectedImg){
//function to increment the rel value in the image that was clicked
$(IDofSelectedImg).attr("rel")= upthis +1;
},
});
您需要为每个img元素提供一些唯一标识符才能选择它,并将其ID发送到php脚本。 为upvote
添加一个类而不是 ID,并使 id 成为唯一可识别的数字,当您需要增加 rel 值时,可以使用 jQuery 将其作为目标。 (从外观上看,您似乎正在将 rel 属性中的值放入数据库中以代替旧值。
JQuery 的一个很好的编程技巧,不要做:
<a href="javascript:return false;"
而是执行以下操作:
$(function(){
$('#upvote').on('click', function(event){
event.preventDefault();
$.post('upvote.php', {'plusone': $(this).attr('rel')}, function(data){
alert('done and upvoted');
});
});
});
这是处理 DOM 文档链接的更好方法。
以下是一些 Doc 页面供您阅读有关我使用的编码的信息:
- http://api.jquery.com/on/
- http://api.jquery.com/jQuery.post/
这些将向您解释我的代码。
希望对您有所帮助,