在AJAX帖子中将表单提交转换为AJAX帖子

时间:2015-12-17 18:36:27

标签: javascript php jquery ajax codeigniter

我需要将表单提交更改为ajax帖子。我在codeigniter框架内工作。目前的JS代码是:

$('#book-appointment-submit').click(function(event) {
    event.preventDefault();

    var formData = jQuery.parseJSON($('input[name="post_data"]').val());
    var postData = {
        'csrfToken': GlobalVariables.csrfToken,
        'id_users_provider': formData['appointment']['id_users_provider'],
        'id_services': formData['appointment']['id_services'],
        'start_datetime': formData['appointment']['start_datetime'],
    };
    if (GlobalVariables.manageMode) {
        postData.exclude_appointment_id = GlobalVariables.appointmentData.id;
    }
    var postUrl = GlobalVariables.baseUrl + '/index.php/appointments/ajax_check_datetime_availability';
    $.post(postUrl, postData, function(response) {
        console.log('Check Date/Time Availability Post Response :', response);
        if (response.exceptions) {
            response.exceptions = GeneralFunctions.parseExceptions(response.exceptions);
            GeneralFunctions.displayMessageBox('Unexpected Issues', 'Unfortunately '
                + 'the check appointment time availability could not be completed. '
                + 'The following issues occurred:');
            $('#message_box').append(GeneralFunctions.exceptionsToHtml(response.exceptions));
            return false;
        } 
        if (response === true) {
            $('#book-appointment-form').submit(); //on submit
        } else {
            GeneralFunctions.displayMessageBox('Appointment Hour Taken', 'Unfortunately '
                + 'the selected appointment hour is not available anymore. Please select '
                + 'another hour.');
            FrontendBook.getAvailableHours($('#select-date').val());
            alert('#select-date');
        }
    }, 'json');
});

控制器

if($this->input->post('submit2')) {       
    $post_waiting = json_decode($_POST['post_waiting'], true);
    $waitinglist = $post_waiting['appointment'];
    $this->load->model('appointments_model');
    $this->appointments_model->waitinglist_to_db($waitinglist);
    $this->load->view('appointments/waiting_success');//return to book view
} else {
    try {
        $post_data = json_decode($_POST['post_data'], true);
        $appointment = $post_data['appointment'];
        $customer = $post_data['customer'];
        if ($this->customers_model->exists($customer)) 
            $customer['id'] = $this->customers_model->find_record_id($customer);
        $customer_id = $this->customers_model->add($customer);
        $appointment['id_users_customer'] = $customer_id; 
        $appointment['id'] = $this->appointments_model->add($appointment);
        $appointment['hash'] = $this->appointments_model->get_value('hash', $appointment['id']);
        $provider = $this->providers_model->get_row($appointment['id_users_provider']);
        $service = $this->services_model->get_row($appointment['id_services']);
        $company_settings = array( 
            'company_name'  => $this->settings_model->get_setting('company_name'),
            'company_link'  => $this->settings_model->get_setting('company_link'),
            'company_email' => $this->settings_model->get_setting('company_email')
        );

表单使用此代码提交正确,但在框架中使用表单时数据将丢失。为了解决这个问题,我需要将行$('#book-appointment-form').submit();更改为ajax调用。我尝试使用与JS中上面的另一个ajax调用类似的格式替换该行:

...
if (response === true) {
    var dataUrl = GlobalVariables.baseUrl + '/index.php/appointments/';
    $.post(dataUrl, formData, function(response) {                  
        console.log('Customer Confirms Post Response:', response);
        if (response.exceptions) {
            response.exceptions = GeneralFunctions.parseExceptions(response.exceptions);
            GeneralFunctions.displayMessageBox('Unexpected Issues', 'Unfortunately '
                + 'the check appointment time availability could not be completed. '
                + 'The following issues occurred:');
            $('#message_box').append(GeneralFunctions.exceptionsToHtml(response.exceptions));
            return false;
        }
    }, 'json');
} else {
...

这不起作用。

  

我收到500服务器错误。

我认为我在其他ajax调用中没有正确处理ajax调用。我假设我需要在我的控制器中创建一个函数来接收调用,所以我将"ajax_customer_confirms"添加到了url并在我的控制器中创建了一个ajax_customer_confirms()函数,但这也无效。

问题:

  1. 如何在ajax调用中添加ajax调用来替换我的表单提交?
  2. 我是否需要使用控制器中的函数处理ajax调用,或者我可以用ajax调用替换.submit()并让控制器保持独立状态?

1 个答案:

答案 0 :(得分:0)

每次迭代处理这个问题都会带来更多问题,但最终的答案在这里发布: AJAX submit and 500 server error

相关问题