Question

我写这个来获取表单数据并将其发布到php页面并做一些处理并将结果返回给我，我开始从我的bootstrap模态表单获取发布数据，我发现脚本不能来自模态形式的值，因为php部分我无法将其上传到小提琴或其他地方。

i upload it on my server for rapid review
点击撰写;
填写字段
当点击发送按钮时，它期望模态表单向jquery ajax发送一些值（在提交时）但是没有从模态输入发送到ajax并且整个$ _POST数组保持为空，并且是什么时候继续？
小时和小时我搜索了doc和示例，但我找不到任何答案，一些示例适用于bootstrap 2，而没有用于bootstrap 3。
bootstrap 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>

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

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

1 个答案: