分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了javascript – 如何在jquery中使用twitter bootstrap按钮？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我想要做的是当用户点击论坛中的提交按钮时,它应该将收集的数据发送到PHP脚本,理想情况下,保持在同一页面上.目前,我有表格(我在表格中有其他标签,但这些是我需要关注的两件事)

<form name = "reply" id="replyForm" action="sqlinserter.PHP" method = "POST">
<button id = "newThread" class="btn btn-priMary" type="submit">Submit</button>

如您所见,我使用一个表单,当用户单击提交按钮时,该表单将数据发送到sqlinserter.PHP.基本形式的东西.现在,当它点击提交时,它会转到实际的sqlinsert.PHP 页面,该页面是空白的,因为它只是将数据发送到数据库.

但是,我想创建一个简单的jquery脚本,单击它使用ajax发送数据的按钮.我注意到twitter引导程序与按钮的工作方式不同,我不确定如何使用jquery按钮.对此的任何帮助都会很棒.

所以,

>我需要弄清楚如何使用twitter引导按钮
jQuery的.具体来说,我需要弄清楚如何使用提交
按钮.
>如何使用ajax发送数据？

解决方法

Bootstrap可以与jQuery一起使用,无需额外的步骤.实际上甚至bootstrap本身也在他们的框架中使用jQuery.

您仍然可以像往常一样使用jQuery,并像往常一样使用bootstrap.两者都可以,没有任何冲突.

它可以通过使用jQuery AJAX函数之一来完成,例如$.ajax.

只需在按钮#newThread上添加新事件,单击即可.在事件处理程序中编写AJAX.基于您的代码的示例可以在下面看到.

HTML

<form name = "reply" id="replyForm" action="sqlinserter.PHP" method = "POST">
    <button id = "newThread" class="btn btn-priMary" type="submit">Submit</button>
</form>

$(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
            },});
    });
});