Javascript 如何将表单连接到ajax并通过它发布_Javascript_Html_Ajax

Javascript 如何将表单连接到ajax并通过它发布

javascript html ajax

Javascript 如何将表单连接到ajax并通过它发布,javascript,html,ajax,Javascript,Html,Ajax,我的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>

我的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%}

{%extends'base.html%}
{%block content%}*
制作食谱


标题：


成分：


标签：


时间：


价格：


风险值数据={
标题：“标题”，
标签：[]，
成分：[]，
时间(分钟):25,，
价格:10.5
};
var headers={'X-CSRFToken'：{{{csrf_token}}}；//使用模板标记将我们的令牌注入javascript
$.ajax({
键入：“POST”，
数据：数据，
headers:headers，//在请求中设置头
url:“/api/recipe/recipes/”，
成功：功能（res）{
console.log（res）
},
});
{%endblock%}

错误：

我想知道如何在ajax中访问我的表单我有var数据，它正在工作，但我希望数据取自表单正文中的数据我的意思是我希望用户从表单中输入自己的数据我一直在努力做到这一点，提前谢谢你你你可以这样输入值：

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 */ });

您好，非常感谢，但我确实是一个初学者，您能给我一个例子，说明我应该在/*您的代码中写什么*/这个函数是在函数（res）中编写的吗？“您的代码”指的是第二个函数中的所有内容，如我所示更改了数据变量，所以这个函数在第二个脚本中封装了所有内容，对吗？表单中的操作必须是什么？这无关紧要，因为您使用jquery将数据发送到另一个端点。如果没有js代码，则将使用该操作，表单数据将发送到其中指定的端点