duanmao2650
2018-07-09 22:12 阅读 51

具有codeigniter验证的Ajax表单

I am trying to make ajax form validation work in codeigniter.

Form and ajax are both in views/products/addproducts,

  <script type="text/javascript"> 
    $(document).ready(function(){
        $("#submitProducts").click(function(e){
        e.preventDefault();
        var dataString = $("#add-products-bulk-form").serialize();
        var url="products/addproducts";
        $.ajax({
            type:"post",
            url:"<?php echo base_url() ?>"+url,
            dataType: 'json',
            data:dataString,
            success:function (res) {
                res=$.parseJSON(res);
                if($.isEmptyObject(res.error)){
                    alert(res.success);
                }else{
                    console.log("hasn't run form yet");
                }
            },  
      })
    })
    });    
    </script>

here is my Products controller:

public function addproducts()
    {
        $data['title'] = "Add Products";
        $this->load->view('templates/header', $data);
        $this->load->view('products/addproducts');
        $this->load->view('templates/footer');
        //form rules
        //$this->form_validation->set_rules('name[]', 'Product Name', 'required');
        $this->form_validation->set_rules('partnumber[]', 'Part number', 'required|is_unique[items.itemSKU]');
        //$this->form_validation->set_rules('msrp[]', 'MSRP', 'required');
        if ($this->form_validation->run() === FALSE)
        {
            echo "did not pass validation";
            $errors = validation_errors();
            echo json_encode(['error'=>$errors]);
        }
        else
        { 
            echo "did pass validation";
            $this->product_model->add_products();
            echo json_encode(['success'=>'Record added successfully.']);
        }
    }

I don't get any response when I click submit button if I keep the code above way. But if I get rid of line dataType:'json', I will get error

VM1679:1 Uncaught SyntaxError: Unexpected token d in JSON at position 0
    at Function.parse [as parseJSON] (<anonymous>)
    at Object.success (addproducts:140)
    at i (jquery-3.1.1.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-3.1.1.min.js:2)
    at A (jquery-3.1.1.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery-3.1.1.min.js:4)

If I get rid of both dataType:'json' and res=$.parseJSON(res), when I enter a duplicated product and click submit, and console.log(res), I get the following in the console, It did return the res and the source code of the whole page addproducts.

    did not pass validation{"error":"<p>The Part number field must contain a unique value.<\/p>
"}<!DOCTYPE html>
<html lang="en">
<head>

I did not paste the whole source code here. and res.success will alert undefined.

I have been stuck for days, please help. I will provide more details if needed. Thanks!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    dongluo9156 dongluo9156 2018-07-09 22:21

    To clean up my earlier comment...

    public function addproducts()
    {
    
        //form rules
        //$this->form_validation->set_rules('name[]', 'Product Name', 'required');
        $this->form_validation->set_rules('partnumber[]', 'Part number', 'required|is_unique[items.itemSKU]');
        //$this->form_validation->set_rules('msrp[]', 'MSRP', 'required');
    
        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);
            $this->product_model->add_products();
            echo json_encode(['success'=>'Record added successfully.']);
        }
    }
    

    Now you can use the success callback to listen for a successful response and the error callback to listen for an error response...

    <script type="text/javascript">
        $(document).ready(function(){
            $("#submitProducts").click(function(e){
                e.preventDefault();
                var dataString = $("#add-products-bulk-form").serialize();
                var url="products/addproducts";
                $.ajax({
                    type:"post",
                    url:"<?php echo base_url() ?>"+url,
                    dataType: 'json',
                    data:dataString,
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert(jqXHR.responseJSON.error);
                    },
                    success: function (data, textStatus, jqXHR) {
                        alert(jqXHR.responseJSON.success);
                    }
                });
            });
        });
    </script>
    
    点赞 评论 复制链接分享
  • douhui4831 douhui4831 2018-07-09 22:37

    I realized that I make ajax call with the same controller function, I divided the addproducts function into two functions as follow,and use ajax to call ajax_add_products function. it works now.

    public function addproducts()
        {
            $data['title'] = "Add Products";
            $this->load->view('templates/header', $data);
            $this->load->view('products/addproducts');
            $this->load->view('templates/footer');
    
    
        }
    
        public function ajax_add_products(){
            //form rules
            //$this->form_validation->set_rules('name[]', 'Product Name', 'required');
            $this->form_validation->set_rules('partnumber[]', 'Part number', 'required|is_unique[items.itemSKU]');
            //$this->form_validation->set_rules('msrp[]', 'MSRP', 'required');
            if ($this->form_validation->run() === FALSE)
            {
                $errors = validation_errors();
                echo json_encode(['error'=>$errors]);
            }
            else
            { 
                $this->product_model->add_products();
                echo json_encode(['success'=>'Record added successfully.']);
            }
        }
    
    点赞 评论 复制链接分享

相关推荐