Angular.js $http.post with Codeigniter not working

Question

I'm trying to submit a new post using $http. it's not working. I tried the shore version and the long version, both fail. console:" Failed to load resource: the server responded with a status of 500 (Internal Server Error) "

This my code:

$scope.doAdd = function(){
    $http({
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    url: 'api/addduans',
    method: "POST",   
      })
      .success(function(data) {
        alert('OK');
      });
    }

My controller:

function addduans_post()  
    {  
            $id_duan = $this->post('id_duan');  
            $title = $this->post('title');
            $addr = $this->post('addr');
            $dis = $this->post('dis');
            $img_duan = $this->post('img_duan');

        $result = $this->admin_model->add_id_da($id_duan,$title,$addr,$dis,$img_duan);


        if($result === FALSE)  
        {  
            $this->response(array('status' => 'failed'));  
        }  
        else 
        {  
            $this->response(array('status' => 'success'));  
        }  
    }  

My Model:

public function add_id_da($id_duan,$title,$addr,$dis,$img_duan) 
        {
        $data = array(
           'id_duan' => $id_duan,
           'title' => $title,
           'addr' => $addr,
           'dis' => $dis,
           'img_duan' => $img_duan
        );

        $this->db->insert('duan_test', $data); 
        }

This my view :

<tr>
                <td> <input name='id_duan' style='width: 50px' ng-model='id_duan'/> </td>
                <td> <input name='title' ng-model='title'/> </td>
                <td> <input name= 'addr' ng-model='addr'/>  </td>
                <td> <input  name='dis' style='width: 60px' ng-model='dis'/>    </td>
                <td> <input name='img_duan' ng-model='file_name'/>  </td>
                <td> <a href="" ng-click="doAdd()" class="btn - btn-info">Add</a>   </td>
            </tr>

Anyone got any idea on how to make this work? Thanks!

Answer 1

Step 1: Make your input fields into a form.

<form ng-submit='doAdd()'>
<tr>
    <td> <input name='id_duan' style='width: 50px' ng-model='myForm.id_duan'/> </td>
    <td> <input name='title' ng-model='myForm.title'/> </td>
    <td> <input name= 'addr' ng-model='myForm.addr'/>  </td>
    <td> <input  name='dis' style='width: 60px' ng-model='myForm.dis'/>    </td>
    <td> <input name='img_duan' ng-model='myForm.file_name'/>  </td>
    <td> <input type="submit" class="btn - btn-info" value="add"> </td>
</tr>
</form>

Step 2: Submit the form

$scope.formData = {};
$scope.doAdd = function(){
    $http({
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        url: 'api/addduans',
        method: "POST",
        data    : $.param($scope.formData)
    })
    .success(function(data) {
        alert('OK');
    });
}

Hope it helps. You seem to be switching from jQuery. Refer here for a simple tutorial.

Answer 2

change this code

$http({
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    url: 'api/addduans',
    method: "POST",
    data    : $.param($scope.formData)
})

to this:

var request = $http.post('api/addduans', $.param($scope.formData), {headers : {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}});

Answer 3

I faced such condition. I have used custom serialize service as following . it may be use for your problem.

appCommonServiceModule.factory('SerialiazeService', function () {
        function SeriliazeService() {
            this.serialiaze = function (obj, prefix) {
                var str = [];
                for (var p in obj) {
                    var k = prefix ? prefix + "[" + p + "]" : p, v = obj[p];
                    str.push(typeof v == "object" ? this.seriliaze(v, k) : encodeURIComponent(k) + "=" + encodeURIComponent(v));
                }
                return str.join("&");
            };
        }
        return new SeriliazeService();
    });

it is used in $http.post like that (memberModel is javascript object data type):

$http.post(BASE_URL + 'index.php/signUp', SerialiazeService.serialiaze(memberModel), {responseType: 'json', headers: {'Content-Type': 'application/x-www-form-urlencoded'}})