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

Question

我写这篇文章是为了获取表单数据，并将其发布到一个PHP页面，然后做一些处理，并将结果返回给我，我从我的引导模式表单中获取表单数据开始，我发现脚本不能从模式表单中获取值，因为PHP部分我不能上传它到小提琴或其他地方。

>

以下是模态代码：

<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>

jQuery：

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

Answer 1

在代码中，在$. 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;

  });
});

在这里，我将表单对象this分配给that