AJAX 调用无法在 Django 中向 API 发送令牌

Posted 2023-02-24

【中文标题】AJAX 调用无法在 Django 中向 API 发送令牌

【英文标题】：AJAX call not working for sending tokens to API in Django

【发布时间】：2020-04-14 00:55:17

【问题描述】：

我有一个令牌，需要将其传递给 API（在 views.py 中创建），以便取回生成的时间。我已使用 Simple-JWT 生成令牌，但无法将其发送到指定的 URL。请参阅下面的代码：

models.py：

class My_time(models.Model):
    id= models.ForeignKey(User, on_delete = models.CASCADE)
    time = models.DateTimeField()

views.py：

#API to get back time (if existing) or create a new time and send it back to the html page via AJAX.

class TimeAPI(generics.ListAPIView):
    permission_classes = [IsAuthenticated] 
    serializer_class = MySerializer
    def get_queryset(self, request):
        current_time = timezone.now()
        if (My_time.objects.filter(time=current_time) in (None, '')): 
            time = My_time.objects.create(time=current_time) #saves it to my database
        else:
            pass
        data = My_time.objects.values_list('time', flat=True)
        return data #should return the data to the HTML page

serializers.py：

class MySerializer(serializers.ModelSerializer):

    class Meta:
        model = My_time
        fields = ('time')

urls.py:

urlpatterns = [
     # ...,
     path('time_api/',TimeAPI.as_view(), name = 'time_api'),
]

interface.html：

% block content %
        <form method="POST">           
            <button type="button" class="btn btn-outline-info" id ='get_time'> Punch In </button> 
            <h4 id='display_time'></h4>
        </form>

% endblock content%

JS 代码（在 HTML 页面内）：

% block javascript %
    <script type="text/javascript">
        $('#get_time').click(function () 
            var access_token = localStorage.getItem('access');  #stored the token before in localStorage
            $.ajax(
                cache: false,  
                url: % url 'time_api' %,
                method: 'GET', 
                // datatype: 'json',
                headers:  "Authorization": 'Bearer ' + access_token 
                success: function(data)   
                    console.log(headers);
                    document.getElementById("display_time").innerHTML(data);
                ,
                error: function(xhr, ajaxOptions, thrownError) 
                    console.log("No data");
                
                );
        );

    </script>

% endblock javascript %

单击我的 HTML 页面中的按钮后，我无法返回生成的时间。事实上，什么也没有发生。

这是 JS 控制台中的错误：

Uncaught SyntaxError: Unexpected identifier

它指向AJAX中的成功函数：

headers:  "Authorization": 'Bearer ' + access_token 
success: function(data)   
    console.log(headers);
..... //remaining code

有人可以解释什么是错的吗？谢谢你

【参考方案1】：

尝试使用浏览器开发工具并检查 js 控制台输出并将其包含在此处，并尝试覆盖 CBV 的 get 方法并检查 if self.request.is_ajax 并返回您需要的数据。这可能是问题

【讨论】：

我已经添加了错误信息。请看一看。

也许修改你的 js 错误处理程序以只接受数据参数，如 error:function(data)console.log('No data'); console.log(data); 然后检查 js 控制台打印出来的内容。

get 方法负责将数据返回给模板，get_queryset 方法控制响应中包含哪些数据，可用于过滤要返回的对象

【参考方案2】：

修改您的错误处理程序以仅接受 data 参数并将其记录到控制台。

错误在js函数中

【讨论】：

我删除了错误处理程序。但它仍然做同样的事情。它不访问 API

我应该改用get方法而不是get_queryset吗？

【参考方案3】：

定义一个新方法def get(self,request): queryset=self.get_queryset()# construct your html response and construct a json response and returñ that然后在js中用data.value访问数据值

【讨论】：

如果你返回一个 json 设置 html 内容为 `document.getElementById('your_id').text(data.value)

感谢您的回复，但是可以格式化您的答案吗？看不懂，抱歉。

【参考方案4】：

定义一个新方法def get(self,request): queryset=self.get_queryset()# construct your html response and construct a json response and returñ that然后在js中用`data.value访问数据值

【参考方案5】：

from rest_framework.response import Response

def get(self, response):
    data = self.get_queryset()
    # assuming data is a dict object
    return Response(data)