Cakephp 2.x中的简单Ajax函数无法正常工作

Question

I am new to cakephp and trying to implement AJAX . I have a view add.ctp in which I have written the following lines :

$('#office_type').change(function(){ 
    var office_id = $('#office_type').val();
    if(office_id > 0) {
    var data = office_id;
    var url_to_call = "http://localhost/testpage/officenames/get_office_names_by_catagory/";
    $.ajax({
        type: "GET",
        url: url_to_call,
        data = data,
        //dataType: "json",
        success: function(msg){
            alert(msg);
        }
    }); 
    }
 });

And the function get_office_names_by_catagory() within OfficenamesController.php is:

public function get_office_name_by_catagory($type = '') {  
    Configure::write("debug",0); 
    if(isset($_GET['type']) && trim($_GET['type']) != ''){
        $type = $_GET['type'];
        $conditions = array("Officename.office_type"=> $type);
        $recursive = -1;
        $office_names = $this->Officename->find("all",array("conditions"=>$conditions,"recursive"=>$recursive));
    }
    $this->layout = 'ajax';
    //return json_encode($office_names);
    return 'Hello !';    
}

But unfortunately, its not alerting anything ! Whats wrong ?

Answer 1

Could be caused by two issues:

1) In your js snippet, you are querying

http://localhost/testpage/officenames/get_office_names_by_catagory/ .

Note the plural 'names' in get_office_names_by_category . In the PHP snippet, you've defined an action get_office_name_by_catagory . Note the singular 'name'.

2) You may need to set your headers appropriately so the full page doesn't render on an AJAX request: Refer to this link .

Answer 2

I think, you have specified data in wrong format:

$.ajax({
    type: "GET",
    url: url_to_call,
    data = data,             // i guess, here is the problem
    //dataType: "json",
    success: function(msg){
        alert(msg);
    }
});

To

$.ajax({
    type: "GET",
    url: url_to_call,
    data: { name: "John", location: "Boston" }, //example
    success: function(msg){
        alert(msg);
    }
});

You should specify the data in key:value format.

Answer 3

$('#office_type').change(function(){ 
    var office_id = $('#office_type').val();
    if(office_id > 0) {
    var data = office_id;
    var url_to_call = "http://localhost/testpage/officenames/get_office_name_by_catagory/"+office_id;
    $.ajax({
        type: "GET",
        url: url_to_call,
        success: function(msg){
            alert(msg);
        }
    }); 
    }
 });

In your action

public function get_office_name_by_catagory($type = '') {  
    $this->autoRender = false;
    Configure::write("debug",0); 
    if(!empty($type)){

        $conditions = array("Officename.office_type"=> $type);
        $recursive = -1;
        $office_names = $this->Officename->find("all",array("conditions"=>$conditions,"recursive"=>$recursive));
    }
    $this->layout = 'ajax';
    //return json_encode($office_names);
    echo 'Hello !'; 
    exit;   
}

See what I have done is I have changed your request to function get_office_name_by_catagory, as there is one paramenter $type is already defined in the function, so if I have the request by /get_office_name_by_catagory/2 then you will find value in $type in action.

So no need to use $_GET and rest everything is fine!

Answer 4

Try this, remove type from ajax and try.

$('#office_type').change(function(){ 
    var office_id = $('#office_type').val();
    if(office_id > 0) {
    var data = office_id;
    var url_to_call = yourlink +office_id;
    **$.ajax({
        url: url_to_call,
        success: function(msg){
            alert(msg);
        }
    });** 
    }
 });

In your action

public function get_office_name_by_catagory($type = '') {  
    $this->autoRender = false;
    Configure::write("debug",0); 
    if(!empty($type)){

        $conditions = array("Officename.office_type"=> $type);
        $recursive = -1;
        $office_names = $this->Officename->find("all",array("conditions"=>$conditions,"recursive"=>$recursive));
    }
    $this->layout = 'ajax';
    //return json_encode($office_names);
    echo 'Hello !'; 
}