Javascript 我的数组/选择未与我的表单一起过帐
html:Javascript 我的数组/选择未与我的表单一起过帐,javascript,html,jquery,ajax,rest,Javascript,Html,Jquery,Ajax,Rest,html: {%extends'base.html%} {%block content%} 制作食谱 $(文档).ready(函数(){ //处理表格 $('form')。提交(函数(事件){ //获取表单数据 //使用jQuery获取此数据的方法有很多(您也可以使用类或id) var formData={ 'title':$('input[name=T]')。val(), 'tags':$('select[name=tags]')。val(), “配料”:$(“选择[名称=配料]).val()
{%extends'base.html%}
{%block content%}
制作食谱
$(文档).ready(函数(){
//处理表格
$('form')。提交(函数(事件){
//获取表单数据
//使用jQuery获取此数据的方法有很多(您也可以使用类或id)
var formData={
'title':$('input[name=T]')。val(),
'tags':$('select[name=tags]')。val(),
“配料”:$(“选择[名称=配料]).val(),
'time_minutes':$('input[name=time]')。val(),
'price':$('input[name=P]')。val(),
'link':$('input[name=link]')。val(),
};
//处理表格
$.ajax({
type:'POST',//定义要使用的HTTP谓词的类型(表单的POST)
url:“/api/recipe/recipes/”,//我们要发布的url
data:formData,//我们的数据对象
dataType:'json',//我们希望从服务器返回什么类型的数据
编码:正确
})
//使用done承诺回调
.完成(功能(数据){
//将数据记录到控制台,以便查看
控制台日志(数据);
//这里我们将处理错误和验证消息
});
//停止表单以正常方式提交并刷新页面
event.preventDefault();
});
});
{%csrf_令牌%}
标题:
成分:
{ing%中的ing百分比}
{{{}}
{%endfor%}
标签:
{%用于标记%中的标记}
{{tag}}
{%endfor%}
时间:
价格:
链接:
{%endblock%}
这是我的HTML我正在将此表单发布到我的rest API所有表单都在发布,除了数组/选择以null发布/0这是发布内容/数据控制台:
id:57成分:数组(0)
长度:0
原型:数组(0)
链接:“recipe.com”
价格:“3.00”
标记:数组(0)
长度:0
原型:数组(0)
时间(分钟):20
标题:“oOao”
原型:对象
正如您所看到的,即使我选择了一个选项,数组中的成分和标签也不会发布。我通过创建一个toString变量解决了这个问题:
{% 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>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
// process the form
$('form').submit(function(event) {
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = {
'title' : $('input[name=T]').val(),
'tags' : $('select[name=tags]').val(),
'ingredients' : $('select[name=ingredients]').val(),
'time_minutes' : $('input[name=Time]').val(),
'price' : $('input[name=P]').val(),
'link' : $('input[name=link]').val(),
};
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : '/api/recipe/recipes/', // the url where we want to POST
data : formData, // our data object
dataType : 'json', // what type of data do we expect back from the server
encode : true
})
// using the done promise callback
.done(function(data) {
// log data to the console so we can see
console.log(data);
// here we will handle errors and validation messages
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
});
</script>
</head>
<body class="">
<form method="POST">
{% csrf_token %}
<br>
<label for="T">Title: </label>
<input type="text" name="T" value="">
<br>
<label for="Ingr">Ingredients: </label>
<select multiple name="ingredients">
{% for ing in Ing %}
<option value="{{ing.pk}}">{{ing}}</option>
{%endfor%}
</select>
<br>
<label for="Tag">Tags: </label>
<select multiple name="tags">
{% 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>
</body>
</html>
{%endblock%}
感谢您的帮助尝试使用
'tags[]”
因为它是多选的。$('select[name=tags[]).val(),您的意思是这样的吗?不,在formData
对象中:'title[]:$('select[name=tags]')。val()
实际上,我认为jQuery可能会自动为您这样做,因为您将它们记录为数组。它仍然以0的形式发布
var tags = $('select[name=tags]').val();
var tagsS = tags.toString();
var ingredients = $('select[name=ingredients]').val();
var ingredientsS = ingredients.toString();
var formData = {
...
'tags' : tagsS,
'ingredients' : ingredientsS,
...
};