我需要创建一个带有30个按钮的jQuery应用程序,从1到30,每个按钮通过Ajax调用完全相同的动作脚本,其中传递给动作脚本的参数只是按下按钮的数量(1到30)。
例如,假设动作脚本为process.php
,如果按下按钮3,则需要从process.php?btn=3
提取数据,如果按下按钮27,则需要提取数据来自process.php?btn=27
。
我应该使用哪种类型的按钮:<input>
按钮,<a>
按钮,<button>
按钮或其他内容?你为什么建议呢?
另外,Ajax如何获得按照你建议的方法按下按钮的相应值(1-30)?
谢谢!
答案 0 :(得分:1)
如果禁用JavaScript,我建议使用<a/>
,以维护应用程序的功能。
<a href="process.php?btn=3" class="actionButton">Button 3</a>
该脚本只需使用href
发布到您的信息页。
$("a.actionButton").click(function(e){
e.preventDefault();
$.post(this.href, {}, function(data){
//do something with the data.
});
});
<强>更新强>
由于JavaScript是必需的,因此我的建议取决于您的应用程序设计。如果您希望大按钮看起来像按钮,只需使用<input type="button" value="3"/>
默认情况下,它们将具有悬停效果,开箱即用的凹陷效果。
如果您的按钮看起来不像普通按钮,可能只是块或其他风格,<div/>
也可以选择。使用<a/>
的一个缺点是你总是要压制click()
的默认行为
答案 1 :(得分:1)
每个都可以正常工作。但<a>
您可以使用图片设置样式,而<input>
和<button>
则不能(浏览器决定外观)。
只需在按钮上绑定click事件即可。假设你有这个HTML:
<a href="/process?button=1">Button 1</a>
<a href="/process?button=2">Button 2</a>
...
<a href="/process?button=3">Button 3</a>
这是Javascript。诀窍是在这里调用AJAX,并返回false以防止浏览器更改页面。
$('a').click(function(e) { $.get($(this).attr('href'), function(result) { alert('AJAX result = '+result); }); return false; });
答案 2 :(得分:0)
您可以在每个按钮上创建自定义属性。
<input type="button" onclick="YourCallbackMethod(this)" buttonNumber="1" value="Button 1" />
在你的javascript中
function YourCallbackMethod(button)
{
var number = $(button).attr("buttonNumber");
// Call the ajax method with the number value.
}
通过执行此操作,您可以添加其他属性来扩展存储在每个按钮中的数据,这也使得AJAX目标链接变得非常容易,因为它是集中的,而不是分布在多个锚标记周围。
答案 3 :(得分:0)
作为Marks答案的替代方案,您可以使用<form>
元素,并让每个按钮都有submit
按钮; input
或button
。将元素的名称设置为“btn”,将元素的值设置为按钮编号。
<form id="foo" action="process.php" method="<!-- POST or GET? -->">
<button type="submit" name="btn" value="1">Button 1</button>
</form>
jQuery看起来像:
jQuery(document).ready(function ($) {
$('#foo').bind('submit', function (evt) {
jQuery.ajax({
url: this.action,
data: $(this).serialize(),
success: function () {
// whatever
}
});
evt.preventDefault();
});
});
如果您希望提交是POST请求,那么这很可能会更好。但是,对于GET请求,Marks可能会更容易。