Angular.js $http.post 与 Codeigniter 不工作

Question

我正在尝试使用 $http 提交新帖子。它不工作。我试过岸版和长版，都失败了。控制台：“加载资源失败：服务器响应状态为 500（内部服务器错误）”

这是我的代码：

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

我的控制器：

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'));  
        }  
    }  

我的模特：

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); 
        }

这是我的看法：

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

有人知道如何进行这项工作吗？谢谢！

Answer 1

第 1 步：将您的输入字段制作成一个表单。

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

第 2 步：提交表单

$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');
    });
}

希望对您有所帮助。您似乎正在从 jQuery 切换。简单教程请参考here。

Answer 2

我遇到了这样的情况。我使用了自定义序列化服务，如下所示。它可能对您的问题有用。

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();
    });

在 $http.post 中这样使用（memberModel 是 javascript 对象数据类型）：

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

Answer 3

更改此代码

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

到这里：

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