如何使用Ajax更新MySQL表并在不重新加载页面的情况下获取新内容

I really need help. I am creating a job system for the company I work for where we create jobs for various clients on our website. There are companies and each companies have store locations and users and each job under a company is associated with a campaign week and a store location. Therefore, creating a job means one need to select the company, select the store (stores) under that Company you want to create this job for, select a user of that company, select a Campaign week, put in the additional information for the job and click CREATE JOB.

At first, we would go to the company page and add new Company, than the store's page, users, etc. before going to the job page to create new job. Now, I'm creating a form wizard to do everything on one page.

Currently, I created the form wizard system that allows us select or create stuff, but each time we create a new company, store, user or campaign, the page have to reload and the form wizard starts from the first step. If we use Ajax to create a new stuff, it submit the content without reloading the page. However, we want to make the new content to be visible in the dropdown select field immediately without reloading the page.

Here is the sample of the Ajax I'm using to submit new company, store, etc.

    // Create a new Company 
 $(function(){
    $('#addCompany').submit(function(e){
        e.preventDefault();
        var form = $(this);
        var post_url = form.attr('action');
        var post_data = form.serialize();
        $.ajax({
            type: 'POST',
            url: post_url, 
            data: post_data,
            success: function() {
                $("#newCompany").modal('hide');
                $('#mesg').append('<div class="alert alert-success" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>Nice!</strong> Company was added successfully!</div>');
              }
            });
        });
    });

and here is the sample of the Ajax I'm using to fetch the dropdown list.

 // General List for Company and Stores
function Company() {
    $('#Company').empty();
    $('#Company').append("<option value=''>- Select Company -</option>");
    $.ajax({
        type:"GET",
        url:"Inc/json/companies.php",
        contentType:"application/json; charset=utf-8",
        dataType:"json",
        success: function(data) {
            $('#Company').empty();
            $('#Company').append("<option value=''>- Select Company -</option>");
            $.each(data,function (index, item) {
                $('#Company').append('<option value="'+ item.Company_ID +'">'+ item.Company_Name +'</option>');
            });
        },complete: function() {}
    });
}

It is working fine and the data is being submitted. I just want to know how the new data can be fetch to the dropdown field immediately too. I'm also using Ajax and php/json to fetch the data from the database.

No matter what if you are trying to fetch the dropdown elements from a database it's going to have to wait for those elements to be added to the database. Once they are added though you should be able to create a php function to fetch the elements of drop down menu, and this php function should be callable from an ajax request. Or another possibility is calling the database before the element is added into the database and then adding it to the array of elements returned by the database using php. Just send the element as a get or post variable to the php function or handle adding it to the elements in the array in the javascript