Question

我无法通过ajax获取ajax加载的表单（#ajaxLoadedForm）。 formData对象不收集任何数据。我想我必须将一个事件处理程序附加到表单，以便DOM识别它，但我无法弄清楚如何。

一些注意事项：我绕过了'submit'方法并使用了一个按钮（#button），因此我无法将处理程序附加到该方法。表格本身是#button的兄弟，而不是孩子。

<form id="ajaxLoadedForm" enctype="multipart/form-data" action="destination.php" method="POST">
<input type="hidden" name="state" value="1" />
<label for="fullname">Your Full Name</label>
<input type="text" id="name" autocapitalize="off" autocorrect="off" name="fullname" placeholder="your name" value="" />
</form>
<div id="button">Submit me!</div>

$('#button').click(function(){
    var uploadData = new FormData($("#ajaxLoadedForm")[0]);

    jQuery.ajax({
        url: 'destination.php',
        data: uploadData,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function(data){
            data = JSON.parse(data);
            if (data['pass'] == false) {
                console.log('fail');
            } else {
                console.log('success');
            }
        }
    });

});

Answer 1

您可以使用序列化功能发送表单数据。如下所示

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script >
$('#button').click(function(){
    var uploadData = $('#ajaxLoadedForm').serialize();

    jQuery.ajax({
        url: 'destination.php',
        data: uploadData,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function(data){
           data = JSON.parse(data);
            if (data['pass'] == false) {
                console.log('fail');
            } else {
                console.log('success');
            }
        }
    });

});
</script>

Answer 2

尝试在表单上使用提交处理程序

$('#ajaxLoadedForm').submit(function(e){
e.preventDefault();
var uploadData = new FormData(this);
});

然后按下提交提交类型的按钮

<button type='submit'>Submit</button>

在你的php方面，通过这样做来测试数据：

print_r($_POST);

Answer 3

尝试以下代码..

$('#button').click(function(){
var uploadData = new FormData();
uploadData.append('fullName',$('#fullName').val());

jQuery.ajax({
    url: 'destination.php',
    data: uploadData,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){

    }
});

});

并尝试在php中访问全名

通过ajax提交ajax创建的表单

3 个答案: