你如何在 jquery 中使用 twitter bootstrap 按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15537959/
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
How do you use twitter bootstrap button with jquery?
提问by Ashwin Jacob
What I want to do is when a user clicks on the submit button in a forum, it should send the data collected to the php script and ideally, stay on the same page. Currently, I have in the form(I have other tags in the form but these are the two things I need to focus on)
我想要做的是当用户点击论坛中的提交按钮时，它应该将收集的数据发送到 php 脚本，理想情况下，保持在同一页面上。目前，我有表单（表单中有其他标签，但这是我需要关注的两件事）
<form name = "reply" id="replyForm" action="sqlinserter.php" method = "POST">
<button id = "newThread" class="btn btn-primary" type="submit">Submit</button>
As you can see, I use a form that sends the data to sqlinserter.php when the user clicks the submit button. Basic form stuff. Right now, when it clicks submit it goes to the actual sqlinsert.php page which is blank because it is just sending data to the database.
如您所见，当用户单击提交按钮时，我使用了一个将数据发送到 sqlinserter.php 的表单。基本形式的东西。现在，当它点击提交时，它会转到实际的 sqlinsert.php 页面，该页面是空白的，因为它只是将数据发送到数据库。
However, I would like to create a simple jquery script where you click the button it sends the data using ajax. I have been noticing that twitter bootstrap works differently with buttons and I am not sure how to use their buttons with jquery. Any help with this would be great.
但是，我想创建一个简单的 jquery 脚本，您可以在其中单击它使用 ajax 发送数据的按钮。我一直注意到 twitter bootstrap 与按钮的工作方式不同，我不确定如何将它们的按钮与 jquery 一起使用。对此的任何帮助都会很棒。
So,
所以，
- I need to figure out how to use twitter bootstrap buttons with jquery. Specifically, I need to figure out how to use the submit button.
- How to send data using ajax?
- 我需要弄清楚如何在 jquery 中使用 twitter bootstrap 按钮。具体来说，我需要弄清楚如何使用提交按钮。
- 如何使用ajax发送数据？
回答by novalagung
- I need to figure out how to use twitter bootstrap buttons with jquery. Specifically, I need to figure out how to use the submit button.
- 我需要弄清楚如何在 jquery 中使用 twitter bootstrap 按钮。具体来说，我需要弄清楚如何使用提交按钮。
Bootstrap can be used together with jQuery, no additional steps required. Actually even bootstrap itself use jQuery in their framework.
Bootstrap 可以与 jQuery 一起使用，不需要额外的步骤。实际上甚至引导程序本身在他们的框架中使用 jQuery。
You can still use jQuery like usual, and bootstrap like usual. Both will work, without any conflicts.
你仍然可以像往常一样使用 jQuery，像往常一样使用引导程序。两者都可以工作，没有任何冲突。
- How to send data using ajax?
- 如何使用ajax发送数据？
It can be done by using one of jQuery AJAX function, for example $.ajax.
它可以通过使用 jQuery AJAX 函数之一来完成，例如$.ajax。
Just add new event, click, on your button #newThread. Write the AJAX inside the event handler. Example based on your code can be seen in below.
只需click在您的按钮上添加新事件 , #newThread。在事件处理程序中编写 AJAX。可以在下面看到基于您的代码的示例。
HTML
HTML
<form name = "reply" id="replyForm" action="sqlinserter.php" method = "POST">
<button id = "newThread" class="btn btn-primary" type="submit">Submit</button>
</form>
JS
JS
$(function() {
$('#newThread').on('click', function (e) {
e.preventDefault(); // disable the default form submit event
var $form = $('#replyForm');
$.ajax({
url: $form.attr("action"),
type: $form.attr("method"),
data: $form.serialize(),
success: function (response) {
alert('response received');
// ajax success callback
},
error: function (response) {
alert('ajax failed');
// ajax error callback
},
});
});
});
回答by defau1t
There isn't any specific way to use a twitter bootstrap button. Just grab the id of this submit and submit the data via ajax like below:
没有任何特定方法可以使用 Twitter 引导按钮。只需获取此提交的 id 并通过 ajax 提交数据，如下所示：
$.ajax({
type:'GET',
dataType:'xml',
url:'path/to/phpfile.php',
success:function(data) {
// Do the handling here
},
error:function() {
alert("Sorry, Ajax call Failed");
}
});
回答by basarat
There is nothing specific to form submission with bootstrap. You just need to make sure the button is insde the form (which you should want even if it wasn't bootstrap).
使用 bootstrap 提交表单没有什么特别的。您只需要确保按钮在表单中（即使它不是引导程序，您也应该想要）。
<form name = "reply" id="replyForm" action="sqlinserter.php" method = "POST">
<button id = "newThread" class="btn btn-primary" type="submit">Submit</button>
</form>
you are missing the closing </form>tag
你错过了结束</form>标签
