使用 jquery ajax 从 Bootstrap 3 模态表单获取数据


get data From Bootstrap 3 modal form with jquery ajax

我写这个是为了获取表单数据并将其发布到 PHP 页面并执行一些处理并返回结果给我,我从我的引导模态表单获取发布数据开始,我发现脚本无法从模态形式中获取值,因为 PHP 部分我无法将其上传到小提琴或其他地方。

  • 我将其上传到我的服务器上以便快速查看

  • 点击撰写;

  • 填写字段
  • 当发送按钮单击它时,它期望模态表单向jquery ajax发送一些值(提交时),但从模态输入发送到ajax和整个$ _POST数组的任何内容都保持为空,这是怎么回事?
  • 我搜索了几个小时的文档和示例,但我找不到任何答案,一些示例适用于引导程序 2,而不适用于引导程序 3。
  • 引导程序 3.3.1,jquery 2.1.1
  • 这是模态代码:

    <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Compose</h4>
            </div>
            <div class="modal-body">
                <form id="sendmail" data-async  method="post" role="form" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2" for="inputTo">To</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="inputTo" placeholder="comma separated list of recipients">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2" for="inputSubject">Subject</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputSubject" placeholder="subject">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-12" for="inputBody">Message</label>
                        <div class="col-sm-12">
                            <textarea class="form-control" id="inputBody" rows="18"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" value="Submit">Send</button>
                        <div id='response'></div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    

    j查询:

    $(document).ready(function () {
        $('#sendmail').submit(function () {
            $('#response').html("<b>Loading response...</b>");
            $.ajax({
                type: 'POST',
                url: 'proccess.php',
                data: $(this).serialize()
            })
                .done(function (data) {
                    $('#response').html(data);
                })
                .fail(function () {
                    alert("Posting failed.");
                });
            return false;
        });
    });
    

    简单的PHP代码:

    print_r($_POST);
    

在你的代码中,$.ajax 方法的对象中提供的this引用 ajax 对象。似乎您需要引用必须从中获取数据并将其序列化并将其发送到 AJAX 请求的形式。

尝试以下代码,

$(document).ready(function () {
    $('#sendmail').submit(function () {
    var that = this;
    $('#response').html("<b>Loading response...</b>");
    $.ajax({
        type: 'POST',
        url: 'proccess.php',
        data: $(that).serialize()
    })
        .done(function (data) {
            $('#response').html(data);
        })
        .fail(function () {
            alert("Posting failed.");
        });
    return false;
  });
});

在这里,我通过将其分配给that来引用表单对象this