Django Angularjs如何使用特定的Id调用Http请求

Django Angularjs How to call Http request with specific Id

本文关键字:Id 调用 Http 请求 Angularjs 何使用 Django      更新时间:2023-09-26

我是angularjs的新手。我试图使用angularjs在我的django模板之一拉数据。这是我实际尝试提取数据的视图。

def download_history(request,download_id):
    from django.core import serializers
    download_history = DownloadHistory.objects.filter(user = request.user,pk=download_id)
    ctx_detail_history = serializers.serialize('json', download_history)
    return HttpResponse(ctx_detail_history)

这是url

url(r'^history_detail/(?P<download_id>'d+)/$',views.download_history,name = 'download_history'),

,这是我的模板,我试图拉数据,并试图在一个jquery弹出模式显示。

{% extends 'base.html' %}
{% block title%}User Subscription {%endblock%}
{%block content%}
<div style="margin-top:100px;background-color:#85ADFF;" ng-app='history'>
    <table class="table table-striped" >
        {%for download_history_name in download_history%}
         <tr>
          <td><button type='button' data-toggle="modal" data-target="#myModal"><a href={%url 'download_history' download_history_name.id %} >{{download_history_name.name}} and the id {{download_history_name.id}}</a></button></td>
         </tr>
        {%endfor%}
</table>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Objact Name</h4>
      </div>
      <div class="modal-body">
         <div class="table-responsive">
          <table class="table table-striped" ng-controller='HistoryCtrl'>
            <tbody>
                <tr>
                    {[{detail_history.fields.name}]}
                    {[{detail_history.fields.download_rate}]}
                    {[{detail_history.fields.photo.url}]}
                    {[{detail_history.fields.downloaded_time}]}
                    {[{detail_history.fields.DuePayment}]}
                </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


</div>  
{%block extrajs%}
<script>
var app = angular.module('history',[]);
app.config(function($httpProvider){
   $httpProvider.defaults.xsrfCookieName = 'csrftoken';
   $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
});
app.config(function($interpolateProvider){
   $interpolateProvider.startSymbol('{[{');
   $interpolateProvider.endSymbol('}]}');
});
app.controller('HistoryCtrl',['$scope','$http' , function($scope,$http){
    $http.get('/history/history_detail/(? P<download_id>'d+)/').success(function(data){
          //$scope.doToggle=false;
          $scope.detail_history=data;
        }).error(function(data,status){
              $scope.data = data || 'Request Fails';
              $scope.status = status;
              console.log(data)
            });
  }]);
</script>

{%endblock%}
{%endblock%}

现在的问题是,虽然我试图拉数据与特定的id,但它不工作,,事实上,如果我检查页面,它显示返回URL的东西

   http://localhost:8000/history/history_detail/(?Pd+)/

现在是什么问题,我肯定在这里犯了一个错误,但我在angularjs非常新的,不能弄清楚。是否可以使用ng-click功能来解决这个问题?

从对JavaScript的粗略检查来看,您似乎正在尝试向包含正则表达式的URL发出GET请求。这对你的Django配置来说是有意义的,因为你告诉应用程序在url中期待一个数字,你把这个数字赋给一个名为download_id的变量。看起来你已经将这个URL直接复制到你的JavaScript中,实际上你应该在你的GET请求中提供一个特定的下载id。'/历史/history_detail/12345/')。