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 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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 idea tomcat和sql驱动不匹配吗
  • ¥15 如何查看h3c 5130s-28f-si交换机配置 及更改网口
  • ¥15 HFSS仿真喇叭天线阵列方向图出现异常
  • ¥15 blender自发光强度
  • ¥15 FIR滤波器算法设计与实现(利用库函数firdec()
  • ¥15 利用单片机产生正弦信号,来测量差分放大电路放大倍数和共模放大倍数的思路和仿真
  • ¥60 关于mavlink的论文咨询
  • ¥66 定制开发肯德基自动化网站下单软件
  • ¥15 中科院研发的TextMind(文心)
  • ¥20 vscode虚拟环境依赖包未安装