javascript - 如何使用 Ajax 通过 Bootstrap Modal 提交表单

Question

我会尽量简洁，我是 bootstrap 和高级 javascript 的新手，基本上我已经使用 bootstrap modal 在用户面前加载表单以收集数据并将其保存在数据库中。我的问题是你将如何使用 ajax 来做到这一点，因为我还有其他模式也将具有不同的形式，我不想一次又一次地处理整个页面。 附言 我在 codeigniter 中制作这个应用程序

这是模态内的表单

 <section id="launch" class="modal hide fade" style="width: 800px; left: 500px;">
              <header class="modal-header" style="height: 7px; background: none repeat scroll 0% 0% rgb(87, 164, 210);">
                <h4 style="margin-bottom: 0px; margin-top: -5px; text-align: center; color: white;">Unit Details</h4>
                <button type="button" class="close" data-dismiss="modal" style="margin-top: -20px;">&times</button>
              </header>
 <?php echo form_open('setupnewblock/registerNewBlock'); ?>
<div class="modal-body" style="padding-top: 0px; padding-left: 0px; " >
 <div style="position: relative; left: 43px; margin-top: 41px; margin-left: 0px;">
                <span>Address 1</span>
                <input  type="text" placeHolder="" name="address1" style="width: 219px; height: 17px; margin-left: 20px; margin-top: 3px;" value="<?php echo set_value('address1'); ?>"/>
                <br />
                <span>Address 2</span>
                <input  type="text" placeHolder="" name="address2" style="width: 219px; height: 17px; margin-left:20px; margin-top: 3px;" value="<?php echo set_value('address2'); ?>"/>
                <br />
                <span>Address 3</span>
                <input  type="text" placeHolder="" name="address3" style="width: 219px; height: 17px; margin-left:20px; margin-top: 3px;" value="<?php echo set_value('address3'); ?>"/>
                <br />
                <br />
              </div>
 <footer class="modal-footer" style="margin-top: 475px;">
          <input type="submit" value="Save" name="save" class="btn btn-primary" style="margin-top: 2px;  height: 27px; width: 89px;" data-dismiss="modal"></input>
          <?php echo form_close(); ?>
        </footer>
      </section>

我想使用ajax提交这个表单

Answer 1

我遇到了同样的问题，但是当我尝试这个时 gist一切都做得很好。

你可以试试这个代码:

$(document).ready( function() {
    $('.modal form').on('submit', function(event) {
        event.preventDefault()
        $.post( $(this).attr('action'), $(this).serialize(), function(data) {
            // just try to see the outputs
            console.log(data)
            if(data.return===true) {
                // Success code here
            } else {
                // Error code here
            }
        }, 'json')
    })
});