Question

我正在使用 Codeigniter 与 jquery ajax调用，我想要的是：
显示来自Codeigniter自己的form_validation错误的错误消息。

我正在使用jquery $.ajax方法并通过点击sumbit按钮获取表单值，该按钮在formhander.js文件中处理。

当我通过 jquery ajax方法提交表单时，我总是在这种情况下获得if($this->form_validation->run() == FALSE)。

我的Controller文件：ajaxcontroller.php如下：

class AjaxController extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->library('form_validation');
        $this->load->helper('url');
    }

    public function index() {
        $this->form_validation->set_rules('FName', 'First Name', 'required|min_length[1]|max_length[50]');
        $response = array('Code' => 500, 'Message' => NULL);

        if ($this->form_validation->run() == FALSE) {
            $this->load->view('ajax_form');
        } else {
            $FirstName = $this->input->post('FName');

            if ($FirstName != '') {
                $response['Code'] = 200;
                $response['Message'] = 'Thank you, ' . $FirstName .'For your form submission using jquery ajax';
            } else {
                $response['Code'] = 500;
                $response['Message'] = 'You must fill your NAME field';
            }
            echo json_encode($response);
        }
    }
}

我的查看文件：ajax_view.php如下：

<html>
    <head>
        <title>This is testing of jQuery Ajax</title>
        <script src="<?php echo base_url('assets/testjs/jquery.js'); ?>"></script>
        <script src="<?php echo base_url('assets/testjs/formhandler.js');?>"></script>
        <style>
            div.invalid {
                color: red;
                font-size: 12px;
            }
        </style>
    </head>
    <body>
        <?php echo validation_errors(); ?>
        <form method="post" id="MyForm" name="MyForm">
            First Name:<input type="text" id="FName" name="FName" /><br>
            <input type="submit" id="submit" name="submit" value="Submit" />
        </form> 
    </body>
</html>

我的jquery ajax文件：formhander.js如下：

$(document).ready(function(){
    function handleform() {
        $("#submit").live('click',function(){

            var fName = $("#FName").val();
            var data ='FName='+fName;

            console.log(data);
            $.ajax({
                type: "POST",
                url: "http://localhost/ci/index.php/ajaxcontroller/index",
                data: data,
                dataType: "JSON",
                success: function(obj){
                    if(obj.Code) 
                        $("#output").html(obj.Message);
                    else 
                        $("#output").html(obj.Message);
                }
            });
            return false;
        });    
    }
});

当我点击提交按钮时，我得到的是整个视图文件，但是当我使用jquery ajax方法提交表单时，我想显示codeigniter form_validation错误消息。

如果我没有正确地做或者不可能，请告诉我。

Answer 1

可能没关系，我相信这是你的ajax调用中缺少的jQuery serialize()方法，它用于表单处理，我在发送ajax表单请求之前遇到了很多错误。而不是

var fName = $("#FName").val();
data: data, // ajax call

将其替换为：

var formData = $("#myForm").serialize();
 data: formData, // ajax call

我很确定它会起作用。

Answer 2

你的formhander.js看起来很奇怪，因为你在$(document).ready()处理程序中定义了一个函数而没有调用它。

因此，#submit.click处理程序未附加到按钮，并且没有任何内容拦截点击。

你应该纠正你的javascript（我建议删除function handleform()定义）

您无法直接向CodeIgniter控制器提交，因为CodeIgniter会在视图中为您生成表单标记，并且可能还包括一些额外的隐藏输入。
从您的视图中包含javascript，然后您的控制器应该按照需要运行，但是如果用户禁用javascript，您还希望触摸发布的数据以获得正常的控制器行为。

已更正formhander.js

$(document).ready(function(){
    /// attaching event handler to the form submit event
    $("form#myForm").submit(function(ev){
        ev.preventDefault();

        var url=this.action;
        $.post( // use of the shorhand function
            url,
            $(this).serialize(),
            function(obj) {
                console.log(obj) // you should check this one
                if(obj.code == 200 ) {
                ...
                }else{
                ...
                }
            },
            "json"
        );
        return false;
    });    
});

Answer 3

我对你的程序进行了一些修改：

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class AjaxController extends CI_Controller {

public function __construct() {
    parent::__construct();
    $this->load->helper('url');
}

public function index(){
        $this->load->view('ajax_form');
}

function clicked(){
        $FirstName = $this->input->post('FName');

        if ($FirstName != '') {
            $response['Code'] = 200;
            $response['Message'] = 'Thank you, ' . $FirstName .'For your form submission using jquery ajax';
        } else {
            $response['Code'] = 500;
            $response['Message'] = 'You must fill your NAME field';
        }
        echo json_encode($response);


}

}

在你的控制器中，我将ajax_form视图的加载分离到你的ajax函数，注意：ajax和代码点火器表单验证不能一起工作，因为CI表单验证需要刷新页面才能显示验证结果

<script>
$(document).ready(function(){
//function handleform() { //removed the function handleform() because you will no longer need it, and you are not calling it in the first place.
    $("#submit").on('click',function(){ //replace live with on. 
    var fName = $("#FName").val();
    var data ='FName='+fName;

    console.log(data);
    $.ajax({
        type: "POST",
        url: "http://localhost/ci/index.php/AjaxController/clicked",
        data: data,
        dataType: "json",
        success: function(obj){

            //if(obj.Code == 200) //Note: if Statements only evaluates if it is true or false. you did not compare obj.Code to anything, and obj.Code is not true nor false
            //{
                alert(obj.Message); //Note: I have removed your if condition because you will no longer need it. The message you sent from the server to client is already evaluated, there is no need to re-evaluate it in the client.
                //$("#output").html(obj.Message); output element is not found here, so i just alerted your message
            //}

            //else
            //{
                //alert(obj.Message);
                //$("#output").html(obj.Message);
            //} 

        }
    });
    //return false; you don't need to return anything here.
   });    
//}
   });
</script>

<html>
<head>
    <title>This is testing of jQuery Ajax</title>
    <style>
        div.invalid {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>

        First Name:<input type="text" id="FName" name="FName" /><br>
        <input type="submit" id="submit" name="submit" value="Submit" />

</body>

从jQuery 1.7开始，不推荐使用.live（）方法，因此您应该使用on。请注意我删除了<form>标记，因为当您单击类型为submit的输入按钮时，它将触发页面刷新..

具有服务器端验证的Codeigniter和jquery Ajax方法

3 个答案: