使用jquery ajax

Question

我想创建一个提交表单来输入MySQL数据库数据和图像。我想通过jquery ajax使用相同的表单来做到这一点。我尝试了以下代码。我无法成功。当我输入id时，我想要自动填写电子邮件并命名字段auto。我成功地通过ajax做到了。我无法通过ajax提交文件和数据。

    <?php
    print_r($_POST);
    print_r($_FILES);
    ?>
    <form class="form-horizontal" action="postvaccode2.php" method="post" id="data" enctype="multipart/form-data">
        <fieldset>

            <!-- Form Name -->
            <legend>Post Vacancy</legend>

            <!-- Select Basic -->
            <div class="form-group">

                <div class="col-md-5">
                    <select id="cato" name="cato" class="form-control" id="cato">
                        <option value="IT">IT</option>
                        <option value="Finance">Finance</option>
                    </select>
                </div>
            </div>

            <!-- Text input-->
            <div class="form-group">

                <div class="col-md-6">
                    <input id="comid" name="comid" type="text" placeholder="comid" class="form-control input-md" required="" >

                </div>
            </div>

            <!-- Text input-->
            <div class="form-group">

                <div class="col-md-6">
                    <input id="loc" name="loc" type="text" placeholder="city or town" class="form-control input-md" required="">

                </div>
            </div>

            <!-- Text input-->
            <div class="form-group">

                <div class="col-md-8">
                    <input id="qul" name="qul" type="text" placeholder="qulification" class="form-control input-md">

                </div>
            </div>

            <!-- Text input-->
            <div class="form-group">

                <div class="col-md-8">
                    <input id="indate" name="indate" type="date" placeholder="indate" class="form-control input-md">

                </div>
            </div>

            <!-- Text input-->
            <div class="form-group">

                <div class="col-md-4">
                    <input id="expdate" name="expdate" type="date" placeholder="expdate" class="form-control input-md" required="">

                </div>
            </div>

            <div class="form-group">

                <div class="col-md-8">
                    <input id="gpa" name="gpa" type="text" placeholder="gpa" class="form-control input-md">

                </div>
            </div>

            <div class="form-group">

                <div class="col-md-8">
                    <input id="des" name="des" type="text" placeholder="description" class="form-control input-md">

                </div>
            </div>

            <div class="form-group">

                <div class="col-md-8">
                    <input id="title" name="title" type="text" placeholder="title" class="form-control input-md">

                </div>
            </div>

            <div class="form-group">

                <div class="col-md-8">
                    <input id="comname" name="comname" type="text" placeholder="name" class="form-control input-md">

                </div>
            </div>
            <div class="form-group">

                <div class="col-md-8">
                    <input id="email" name="email" type="text" placeholder="email" class="form-control input-md">

                </div>
            </div>

            <div class="form-group">

                <div class="col-md-8">
                    <input id="image" name="image" type="file" class="form-control input-md">

                </div>
            </div>

            <div class="form-group">

                <div class="col-md-8">
                    <input id="vacpost" name="vacpost" type="button" class="form-control input-md">

                </div>
            </div>



        </fieldset>
    </form>

    <script>
        $('#comid').on('input',function(e){
            $.ajax({
                type: "POST",
                url: "postvaccode.php",
                data: {id:$('#comid').val()},
                success: function (response) {
                    var partsOfStr = response.split(',');
                    $('#comname').val(partsOfStr[0]);
                    $('#email').val(partsOfStr[1]);
                }

            });
        });
    </script>

    <script>

        $("form#data").submit(function(){

            var formData = new FormData($(this)[0]);

            $.ajax({
                url: "postvaccode3.php",
                type: 'POST',
                data: formData,
                async: false,
                success: function (data) {
                    alert(data)
                },
                cache: false,
                contentType: false,
                processData: false
            });

            return false;
        });
    </script>

postvaccode3.php

    <?php
    include('dbconnection.php');


   if(isset($_POST['comid'])) {

$comid = $_POST['comid'];
$cato = $_POST['cato'];
$loc = $_POST['loc'];
$qul = $_POST['qul'];
$indate = $_POST['indate'];
$expdate = $_POST['expdate'];
$gpa = $_POST['gpa'];
$des = $_POST['des'];
$title = $_POST['title'];
$comname = $_POST['comname'];
$email=$_POST['email'];

$sql="insert into vacancy(companyid,catogary,location,qulification,indate,expectgpa,description,title,expdate,company_name,email,image) values($comid,'$cato','$loc','$qul','$indate','$gpa','$des','$title','$expdate','$comname','$email')";
if(mysqli_query($conn,$sql)){
    echo "great";
}
else{
    echo "not great";
}
}
?>