为什么我的ajax表格不起作用?

时间:2015-11-10 20:20:00

标签: php jquery ajax

我试图获得这个ajax表单只是为了返回成功消息,但只是得到错误'电影ID是必需的'。 (最后我将表单值插入到mysql数据库中)。请任何人都可以告诉我我做错了什么?非常感谢。

表格

<form action="process.php" method="POST">
<div id="film_id-group" class="form-group">
        <label for="film_id">Film_id</label>
        <input type="text" class="form-control" name="film_id"    placeholder="film_id">        
    </div>
    <button type="submit" class="btn btn-success">Submit <span class="fa fa-arrow-right"></span></button>
</form>

Process.php

<?php

$errors         = array();  
$data           = array();      
$film_id = $_POST['film_id'];


if (empty($_POST['film_id']))
    $errors['film_id'] = 'Film Id is required.';


if ( ! empty($errors)) {


    $data['success'] = false;
    $data['errors']  = $errors;
} else {

    $data['success'] = true;
    $data['message'] ='sucess!';
}


echo json_encode($data);
?>

javascript。

    $(document).ready(function() {

    // process the form
    $('form').submit(function(event) {

    $('.form-group').removeClass('has-error'); // remove the error class
    $('.help-block').remove(); // remove the error text
    var formData = {
        'film_id'               : $('input[film_id=film_id]').val(),
    };

        // process the form
        $.ajax({
        type        : 'POST',
        url         : 'process.php', // the url where we want to POST
        data        : formData, // our data object
        dataType    : 'json', 
        encode      : true
    })
        // using the done promise callback
        .done(function(data) {


            console.log(data); 


            if ( ! data.success) {

                // handle errors
                if (data.errors.film_id) {
                    $('#film_id-group').addClass('has-error');
        $('#film_id-group').append('<div class="help-  block">' +   data.errors.film_id + '</div>'); 
                }                             

            } else {

                $('form').append('<div class="alert alert-success">' + data.message + '</div>');

            }
        })

        .fail(function(data) {

        });

    event.preventDefault();
});

});

1 个答案:

答案 0 :(得分:2)

该行:

'film_id': $('input[film_id=film_id]').val(),
你的AJAX formData对象中的

应该是:

'film_id': $('input[name=film_id]').val()

(同时确保删除尾随逗号,因为之后没有元素。)

您的代码正在搜索<input>元素,如下所示:

<input film_id="film_id" />

这是不正确的。您的选择器应具有name作为属性名称,而不是film_id

因此,因为没有这样的元素,所以不会向PHP文件(“”)发送任何内容,根据documentation,它将评估为false。