我的数据没有发布到 django rest api 使用 Z2705A83A5A0659CCE3458397263EDAAZ

Question

不知何故，我的数据没有发布到 /api/recipe/recipes/ 我的 html

    {% extends 'base.html' %}
    {% block content %}
    <!DOCTYPE html>
    <html>
    
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Create a Recipe</title>
    </head>
    
    <body class="">
      <form>
        {% csrf_token %}
        <br>
        <label for="T">Title: </label>
        <input type="text" name="T" value="">
        <br>
        <label for="Ingr">Ingredients: </label>
        <select class="" name="Ingr">
          {% for ing in Ing %}
          <option value="ing.pk">{{ing}}</option>
          {%endfor%}
        </select>
        <br>
        <label for="Tag">Tags: </label>
        <select class="" name="Tag">
          {% for tag in Tag %}
          <option value="Tag.pk">{{tag}}</option>
          {%endfor%}
        </select>
        <br>
        <label for="Time">Time: </label>
        <input type="text" name="Time" value="">
        <br>
        <label for="P">Price: </label>
        <input type="text" name="P" value="">
        <br>
        <label for="link">Link: </label>
        <input type="text" name="link" value="">
        <br>
        <input type="submit" name="submit" value="Post">
      </form>
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
      <script>
       $('form').on('submit', function(e) {
    e.preventDefault()
      var data = {
        title: $('[name="T"]').val(),
        tags: $('[name="Tag"]').val(),
        ingredients: $('[name="Ingr"]').val(),
        time_minutes: $('[name="Time"]').val(),
        price: $('[name="P"]').val(),
        link: $('[name="link"]').val()
      };

      var headers = {
        'X-CSRFToken': '{{ csrf_token }}'
      }; // Inject our token into the javascript using a template tag
      $.ajax({
        type: 'POST',
        data: data,
        headers: headers, // Set the headers in the request
        url: '/api/recipe/recipes/',
        success: function(res) {
          console.log(res)
        },
      });
  })
      </script>
    </body>
    
    </html>
    {%endblock%}

我正在尝试将此表单发布到 URL 上方的 rest 框架中，如果您有任何解决方案，数据甚至没有发布在控制台中，请帮助我提前谢谢您

我在提交时在控制台中收到这些错误

Uncaught TypeError: $.ajax is not a function
    at HTMLFormElement.<anonymous> ((index):101)
    at HTMLFormElement.dispatch (jquery-3.1.1.min.js:3)
    at HTMLFormElement.q.handle (jquery-3.1.1.min.js:3)

这 3 个错误对我来说是一场噩梦，我尝试了很多方法，但都没有奏效，我真的很感激任何帮助：D

Answer 1

我希望这与您引用库的方式有关，在这里模拟您的代码是有效的（好吧，无论如何它都会发出请求）。 导入同一个库的多个版本可能会导致麻烦，但我不确定它是否会给出您遇到的错误。 在此示例中，从您的代码中，我已经删除了对 django 上下文变量的迭代，但这些应该与您遇到的问题无关。

 $('form').on('submit', function(e) { e.preventDefault() var data = { title: $('[name="T"]').val(), time_minutes: $('[name="Time"]').val(), price: $('[name="P"]').val(), link: $('[name="link"]').val() }; var headers = { 'X-CSRFToken': '{{ csrf_token }}' }; // Inject our token into the javascript using a template tag $.ajax({ type: 'POST', data: data, headers: headers, // Set the headers in the request url: '/api/recipe/recipes/', success: function(res) { console.log(res); }, error: function(res) { var errorMessage = res.status + ': ' + res.statusText; console.error('Error Posting: ', errorMessage); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <br> <label for="T">Title: </label> <input type="text" name="T" value=""> <br> <label for="Time">Time: </label> <input type="text" name="Time" value=""> <br> <label for="P">Price: </label> <input type="text" name="P" value=""> <br> <label for="link">Link: </label> <input type="text" name="link" value=""> <br> <input type="submit" name="submit" value="Post"> </form>

Answer 2

我终于解决了，我的基础中有另一个 jquery 脚本。html 这就是为什么它不起作用我删除了它，现在它可以工作了感谢大家帮助我

我的数据没有发布到 django rest api 使用 Z2705A83A5A0659CCE3458397263EDAAZ

问题描述

2 个解决方案

解决方案1
0 2021-01-02 21:37:44

解决方案2
0 2021-01-04 19:29:40

我的数据没有发布到 django rest api 使用 Z2705A83A5A0659CCE3458397263EDAAZ

问题描述

2 个解决方案

解决方案1 0 2021-01-02 21:37:44

解决方案2 0 2021-01-04 19:29:40

解决方案1
0 2021-01-02 21:37:44

解决方案2
0 2021-01-04 19:29:40