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条)

报告相同问题？

悬赏问题

  • ¥20 机器学习能否像多层线性模型一样处理嵌套数据
  • ¥20 西门子S7-Graph,S7-300，梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效