Javascript Html:单击按钮时的消息

Javascript Html:单击按钮时的消息,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我不喜欢问这样的问题,但我已经搜索了很长一段时间了,我还没有在google或stackoverflow中找到我想要的东西。我正在寻找一种在单击按钮时显示短消息的方法。 我知道警报(“消息”);但是我要找的东西有很多不同。 单击按钮时,我想: 不重新加载页面 根据php函数的结果,在单击的按钮旁边显示一条非常短的1-2行消息 超级php函数 一个例子是,当您尝试对自己的问题/答案/评论进行投票时,会收到stack overflow的消息。 要决定您收到的消息,我必须运行一个php函数(我已经创

我不喜欢问这样的问题,但我已经搜索了很长一段时间了,我还没有在google或stackoverflow中找到我想要的东西。我正在寻找一种在单击按钮时显示短消息的方法。
我知道警报(“消息”);但是我要找的东西有很多不同。
单击按钮时,我想:

  • 不重新加载页面
  • 根据php函数的结果,在单击的按钮旁边显示一条非常短的1-2行消息
  • 超级php函数
一个例子是,当您尝试对自己的问题/答案/评论进行投票时,会收到stack overflow的消息。

要决定您收到的消息,我必须运行一个php函数(我已经创建了),根据该函数的
返回值,我将显示
消息a
,或
消息B
。欢迎对此问题提出任何建议/指导

您必须学习ajax(使用jquery可以很容易地做到这一点)。 Ajax允许您使用javascript/jquery将数据发送到服务器(php脚本),并在不重新加载页面的情况下获得响应


此代码将调用您的php脚本(url),发送数据(例如按钮id或其他),并从服务器返回数据(成功)。

在本例中,AJAX是您的朋友
你可以通过BalusC找到答案,我认为TwitterBootstrap的以下功能就是你想要的:


您可以将其重新定位在按钮前面,并根据需要设置样式。

若要在按钮旁边显示消息,请假设您正在使用jQuery(作为所有懒惰的人):

这基本上会找到您单击的按钮(这里是您的按钮)旁边的元素,清空其内容并替换为Hellow World:)

如果需要根据PHP脚本显示消息,则需要AJAX。它将是这样的:

$('#your-button').click(function(){
    $.get( "myscript.php", function( data ) {
       $(this).next().html(data);
       alert( "Load was performed." );
    });       
});

你能把你写的代码贴出来吗?到目前为止,我只学习了php和基本的html编码。我试图做的只是在点击按钮时,在按钮旁边显示一条消息,这取决于一个php函数的结果,并执行另一个php函数。发布我的代码不会有帮助,因为它与实际问题无关。正在发送弹出消息。我不知道如何编写这样的代码。我想这很简单though@AbdulJabbar如果你看到stackoverflow消息投票给你自己的评论,它在右上角有一个小的(x)按钮,而且,如果你点击它的任何地方,它就会关闭,我真的不在乎消息将如何工作,但我宁愿它留在那里,你手动关闭它,这真的很小,我在寻找ITI真正的基本功能如果你想根据PHP脚本显示消息,你必须使用AJAX:它会找到你的PHP脚本,并在页面上的任何地方返回它的值,而无需重新加载它。您应该了解服务器端和客户端语言之间的区别。@enguerranws我现在已经知道了。然而,我的问题仍然集中在这一点上:
在单击的按钮旁边显示一条短消息
在我问这个问题之前,我已经了解了ajax。从您的回答中我得到的主要问题是:如何在我的按钮旁边显示一条小消息?只需在html中创建一个空的div responseDiv,然后在这段代码之后执行类似responseDiv.html(success)的操作;如果您的php代码(php中的echo$message)中的消息成功,那么有很多示例,我认为您的答案非常笼统,不是吗?如何将消息
显示在我的按钮旁边
就像一条弹出消息一样,我不认为创建一个空div会掩盖我的问题有时候,当它看起来很明显时,我们真的帮不上忙:你说你知道Ajax,而你不知道.click()和.html()方法。有点困惑。哈哈,不客气。。还有很多其他自定义工具提示库可用。我得到的提示是,您正在从您的消息中寻找关于“投票支持您自己对stackoverflow的评论时显示的消息”的工具提示
$('#your-button').click(function(){
    $(this).next().html('Hello World :) ');
});
$('#your-button').click(function(){
    $.get( "myscript.php", function( data ) {
       $(this).next().html(data);
       alert( "Load was performed." );
    });       
});