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

Convert form submit to AJAX post within an AJAX post

本文关键字:AJAX 帖子 转换 表单提交      更新时间:2023-09-26

我需要将表单提交更改为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调用。我认为我需要在控制器中创建一个函数来接收调用,所以我在url中添加了"ajax_customer_confirms",并在控制器中生成了ajax_customer_confirms()函数,但这也不起作用。

问题:

  1. 如何在ajax调用中添加ajax调用来替换表单提交
  2. 我需要用控制器中的一个函数来处理ajax调用吗?或者我可以用ajax调用代替.submit(),让控制器独处吗

处理这个问题的每一次迭代都会带来更多的问题,但最终答案发布在这里:AJAX提交和500服务器错误