javascript - 如何将我的表单连接到 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>
<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 数据并且它正在发布但我希望从正文中的表单中获取数据我的意思是我希望用户从我的表单中放入他自己的数据一直在努力做到这一点提前谢谢你
解决方案
您可以像这样获取输入的值:
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 */ });
推荐阅读
- laravel - 在运行事件 Laravel 之前向客户端返回响应
- c# - 带有外键列表的附加属性
- typescript - 键入具有任意数量的不同参数的函数
- google-maps-api-3 - AutocompleteService.getPlacePredictions 返回带有公寓编号的 ZERO_RESULTS
- r - taskscheduleR 错误:系统找不到指定的文件
- c# - Shopify 激活帐户电子邮件
- javascript - TypeError:无法在 WelcomeAlert 处读取 null 的属性“getValue”
- c# - MVC 5 - 为什么我的 linq 代码选择整个查询而不是单个值?
- java - 在面板上绘制图形
- c# - HttpClient 是否仅通过使用 HTTPS URI 自动安全?