“parsererror”SyntaxError：位于0的JSON中的意外标记<

Question

So I am working on this form that contains both form and files data. I want to submit it through Ajax. So when it can't pass form Validation, use won't loose the whole entry.

create.php

 <script type="text/javascript">
        $("#add-product-form").submit(function(e){
            e.preventDefault();
            var formData = new FormData(this);
            console.log(formData);
            var url="products/ajax_add_single_product";
            $.ajax({
                type:"post",
                url:"<?php echo base_url() ?>"+url,
                data:formData,
                dataType:'json',
                cache: false,
                contentType: false,
                processData: false,
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(jqXHR,textStatus,errorThrown);
                    error = jqXHR.responseJSON.error;
                    $(".submit-message").html(error);
                    console.log(error);
                    $("html, body").animate({ scrollTop: 0 }, 200);
                },
                success: function (data, textStatus, jqXHR) {
                    message = jqXHR.responseJSON.success;
                    $(".submit-message").html(message);
                    location.href = "/products";
                }
            })
        })
    </script>

controller

public function create(){
            $data\['title'\] = "Add Product";
            $data\['categories'\] = $this->category_model->get_categories();
            $data\['children'\] = $this->category_model->get_child_cats(0);
            $data\['vendors'\] = $this->vendor_model->get_vendors();
            $data\['attributes'\] = $this->product_model->get_attributes();
            $this->load->view('templates/header', $data);
            $this->load->view('products/create');
            $this->load->view('templates/footer');
        }

        public function ajax_add_single_product(){
            $this->form_validation->set_error_delimiters('<div class="error">', '</div>');
            $this->form_validation->set_rules('productname', 'Product Name', 'required');
            $this->form_validation->set_rules('partnumber', 'Part Number', 'required|is_unique\[items.itemSKU\]');
            $this->form_validation->set_rules('catID', 'Category', 'required', array('required'=>"You need to pick a %s"));

            header('Content-Type: application/json');
            if ($this->form_validation->run() === FALSE)
            {
                $this->output->set_status_header(400);
                $errors = validation_errors();
                echo json_encode(['error'=>$errors]);
            }
            else
            { 
                $this->output->set_status_header(200);
                $imageData = $this->images_upload();
                $this->product_model->create_product($imageData);
                echo json_encode(['success'=>'Record added successfully.']);
            }
        }

With above code, when entry can't pass form validation, It will give me form validation errors. When the entry is success, it will insert data to database as I expected. but it will still give me a error. seems like i am not getting JSON data, and getting html.

Answer 1

So turns out, there was one line in the create_product() function in the model. After insert data to tables, I put redirect('/products')after, that's why I am getting the html source code of page products.