你如何使用jbery的twitter bootstrap按钮？

Question

我想要做的是当用户点击论坛中的提交按钮时,它应该将收集的数据发送到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按钮.对此的任何帮助都会很棒.

所以,

1. 我需要弄清楚如何使用jquery的twitter bootstrap按钮.具体来说,我需要弄清楚如何使用提交按钮.
2. 如何使用ajax发送数据？

Answer 1

1. 我需要弄清楚如何使用jquery的twitter bootstrap按钮.具体来说,我需要弄清楚如何使用提交按钮.

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

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

2. 如何使用ajax发送数据？

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

只需click在按钮上添加新事件即可#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>

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