爱可信无法从Django的观点得到JSON(Axios unable to get JSON fro

我想实现一个前端和后端与爱可信和Django的视图数据交互。现在，我在发布数据的Django视图与下面的代码获得成功。

axios.post("{% url 'main:getCommodityInfo'%}",
                        param,
                        {headers:{'X-CSRFToken': this.getCookie('csrftoken')}})
                .then(response=>{
                  console.log(response);
                  alert("response has been caught");
                })
                .catch(error=>{
                  console.log(error);
                  alert("connection has error")
                })

但是，当我想从视图返回JSON到爱可信：

def getCommodityInfo(request):
    if request.method=="POST":
        # get POST parameters
        searchKey = request.POST.get('searchKey')
        category = request.POST.get('category')
        print("Enter the POST view!  ", searchKey, category)
        # unique ID for each record for DB
        uniqueId = str(uuid4())
        # spider setting
        settings = {
            'unique_id': uniqueId,
            'USER_AGENT': 'Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)'
        }
        # taskId to indentify each task
        task = scrapyd.schedule('JDSpider', 'getCommodityInfo',
                                settings=settings, searchKey=searchKey, category=category)

        print("It seems everything is running well? ")
        return JsonResponse({'taskId': task, 'uniqueId': uniqueId, 'status': 'started'},safe=False)

浏览器没有变化！首先，我想弄清楚它为什么发生独立。 潜在的线索也许在于urls.py.

urlpatterns = [
    # eg:127.0.0.1:8000/main/
    path('', views.index, name = 'index'),
    path('getCommodityInfo/',views.getCommodityInfo, name = 'getCommodityInfo'),
    path('getCommodityCommentDetail/',views.getCommodityCommentDetail, name="getCommodityCommentDetail"),
    path('commodityInfo/<str:category>/<str:searchKey>/',views.commodityInfoPage, name = 'commodityInfoPage'),
    path('commentsInfo/<str:commodityId>/',views.commodityCommentPage,name = 'commodityCommentPage'),
    # path('?searchkey=<str:searchKey>&categroy=<str:category>/',views.getCommodityInfo, name = 'getCommodityInfo'),
]

因为我发现，最初的URL http://127.0.0.1:8000/main/在浏览器中点击按钮将数据发布到getCommodityInfo视图后成为http://127.0.0.1:8000/main/?searchKey=switch&category=Electronics 。此网址好像不是在urls.py匹配任何URL模式。所以，我试图要追加附加的URLPATTERN path('?searchkey=<str:searchKey>&categroy=<str:category>/',views.getCommodityInfo, name = 'getCommodityInfo') 不幸的是，这是行不通的。

在那之后，我寻找了很久净。但是没有用。请告诉我，我的想法是否正确解决。或尝试给一些想法如何实现this.Thanks提前。

编辑1 我的控制台日志被要求。

这是我的控制台日志点击该按钮后数据之后。

当我点击警报，浏览器去http://127.0.0.1:8000/main/?searchKey=switch&category=Electronics和Chrome网络负载节目，如：

而且还有在控制台没有日志输出。

编辑2 上有Axios公司是否由POST发送请求或得到一些疑惑，我尝试indentify它在我的Django视图

我的Python控制台输出这一点，这意味着getCommodityInfo做indentify请求为POST（你可以审查我的代码）

编辑3 @dirkgroten指出，可能我已经sended POST和GET。 所以我给我的模板相关的整个代码

这里是我的形式。而整个JS相关。

<form action="" id="searchForm">
<label for="searchKey">KeyWords</label>
<input v-model="searchKey" palceholder="Input Search Key" type="string" class="form-control" id="searchKey" name="searchKey">
<label for="category">Commodity Category</label>
<select v-model="selected" id="category" name="category">
    <option v-for="option in options" v-bind:value="option.value">
        ${option.text}
    </option>
</select>

<button v-on:click="startSpider"  class="btn btn-default" >Submit</button>
<p>KeyWords : ${ searchKey }</p>
<p>Category : ${ selected }</p>

</form>

<script type="text/javascript">
    var searchApp = new Vue({
        delimiters:['${','}'],
        el: "#searchForm",
        data:{
          searchKey:'',
          selected:'',
          options: [
            {text: 'Baby', value:'Baby'},
            {text: 'Book', value:'Book'},
            {text: 'Electronics', value:'Electronics'},
            {text: 'Fashion', value:'Fashion'},
            {text: 'Food', value:'Food'},
            {text: 'Health&Beauty', value:'Health&Beauty'},
            {text: 'Home', value:'Home'},
            {text: 'Industrial&Scientific', value:'Industrial&Scientific'},
            {text: 'Motor', value:'Motor'},
            {text: 'Pet', value:'Pet'},
            {text: 'Sports', value:'Sports'},
            {text: 'Other', value:'Other'},
          ]
        },
        created:function(){
          this.selected = "";
        },
        methods:{
          startSpider:function(event){
            console.log(this.searchKey);
            console.log(this.selected);
            alert("spider is ready to run!");
            var param = new URLSearchParams();
            param.append('searchKey',this.searchKey);
            param.append('category',this.selected);

            axios.post("{% url 'main:getCommodityInfo'%}",
                        param,
                        {headers:{'X-CSRFToken': this.getCookie('csrftoken')}})
                .then(response=>{
                  this.searchKey = "!!!";
                  this.category = "Baby";
                  console.log(response.data)
                  alert("response has been caught");
                  console.log(response.data)
                })
                .catch(error=>{
                  console.log(error);
                  alert("connection has error")
                })
          },
          getCookie:function(name) {
              var value = '; ' + document.cookie
              var parts = value.split('; ' + name + '=')
              if (parts.length === 2) return parts.pop().split(';').shift()
            },
        }
    });
</script>

NOTE：事实上，我已经找到了错误。这是所有关于<form> ...解决的办法是在这里