如何使用AngularJS向Django API端点提交数据？

我看你正在尝试用AngularJS通过API端点把表单数据提交到数据库，我帮你把代码整理得更规范，同时提几个关键的注意点，帮你顺利完成功能：

1. 路由配置模块 #

这里最关键的是要给路由绑定对应的控制器，否则模板里的ng-click事件找不到对应的处理函数：

angular.module('myApp').config(function ($routeProvider) { 
  $routeProvider.when('/userurl', {
    // 改用模板字面量让代码更易读
    template : `<form>
                  <p>name:<input type='text' ng-model='myUser' value=''></p>
                  <input type='submit' value='add user' ng-click='postUser()'>
                </form>`,
    // 关联控制器，这是原代码缺失的核心部分
    controller: 'myAppCtrl'
  }); 
});

2. 控制器模块 #

优化了控制台输出信息，让调试过程更清晰：

angular.module('myApp').controller('myAppCtrl', function ($scope, $http) { 
  $scope.postUser = function () { 
    $http({ 
      url : "http://127.0.0.1:8000/users/", 
      method: "POST", 
      data : { username : $scope.myUser }, 
      headers : {
        'Content-Type' : 'application/json', 
        'Accept':'application/json' 
      } 
    }).then(function onSuccess(response) { 
      console.log("数据提交成功，响应内容：", response); 
    }).catch(function onError(error) { 
      console.error("提交失败，错误信息：", error); 
    }); 
  }; 
});

• 确保模块初始化正确：在HTML根元素上要加上ng-app="myApp"（比如<body ng-app="myApp">），否则AngularJS无法识别你的模块和控制器。
• 优化表单提交体验：可以改用ng-submit事件绑定，这样既支持点击按钮提交，也支持回车提交，还能配合表单验证：

  <form ng-submit="postUser()">
    <p>name:<input type='text' ng-model='myUser' value='' required></p>
    <input type='submit' value='add user' disabled="!myUser">
  </form>
  

  这里加了required属性和按钮禁用逻辑，确保用户输入内容后才能提交。
• 跨域问题排查：如果前端和后端运行在不同端口，后端需要配置CORS（跨域资源共享），否则浏览器会拦截你的POST请求，导致提交失败。
• 数据绑定调试：可以在模板里添加{{myUser}}，实时查看输入框的值是否正确绑定到$scope.myUser，快速定位绑定问题。

内容的提问来源于stack exchange，提问作者A.Sasori