Блог

Главная - Вопросы по программированию - как я могу подключить свою форму к ajax и опубликовать через нее

как я могу подключить свою форму к ajax и опубликовать через нее

#javascript #html #ajax

#javascript #HTML #аякс

Вопрос:

мой html:

 {% extends 'base.html' %}
 {% block content %}*
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Create a Recipe</title>
  <form class="" action="index.html" method="post">
    <br>
    <label for="T">Title: </label>
    <input type="text" name="T" value="">
    <br>
    <label for="Ingr">Ingredients: </label>
    <select class="" name="Ingr">
      <option value=""></option>
    </select>
    <br>
    <label for="Tag">Tags: </label>
    <select class="" name="Tag">
      <option value=""></option>
    </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>
  </form>
</head>
<body class="">
</body>
</html>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>

    var data = {
    title: 'title',
    tags: [],
    ingredients: [],
    time_minutes: 25,
    price: 10.5
};
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>
{%endblock%}

ошибка:
введите описание изображения здесь

Я хочу знать, как получить доступ к моей форме в ajax, у меня есть данные var, и они работают, но я хочу, чтобы данные были взяты из формы в теле, я имею в виду, я хочу, чтобы пользователь помещал свои собственные данные из формы, я изо всех сил пытался это сделать, Спасибо заранее

Ответ №1:

Вы можете получить введенные значения следующим образом:

 var data = {
    title: $('[name="T"]').val(),
    tags: $('[name="Tag"]').val(),
    ingredients: $('[name="Ingr"]').val(),
    time_minutes: $('[name="Time"]').val(),
    price: $('[name="P"]').val()
};

И вы бы выполнили свой код при отправке формы:

 $('form').on('submit', function() { /* your code here */ });

Комментарии:

1. здравствуйте, большое вам спасибо, но я действительно новичок, можете ли вы привести мне пример того, что я должен написать в / * ваш код здесь */ и написана ли эта функция внутри function(res)?

2. Под «вашим кодом» я подразумеваю все, что у вас есть внутри второго <script> , изменив переменную данных, как я показал

3. итак, эта функция завершает все во втором скрипте, верно?

4. каким должно быть действие в форме?

5. Это не имеет значения, поскольку вы отправляете данные с помощью jquery на другую конечную точку. Действие будет использоваться, если у вас нет js-кода, и данные формы будут отправлены в указанную в нем конечную точку