是否有可能从视图发送数据到没有表单的控制器?

Question

假设我有以下内容:

<form action="shoecart" method="POST">
<div class="flex-container" id="shoeslist">
<h2>Your bag</h2>
<div class="flex-container" id="individualitem">
<img src="storage/pic1.png" alt="shoe picture">
<p>name</p>
<p>price</p>
</div>
</div>
</form>

是否有办法将图像和段落内容的src发送到控制器?如果是的,我如何将这些数据发送到任何控制器，以便它可以将其添加到表中?如我们所见，表单中没有输入。

Answer 1

是。你可以在Ajax (javascript和jquery)的帮助下完成。

您需要通过id或class获取数据(属性和属性)并传递数据在特定的事件中使用ajax到控制器。

Answer 2

不行，你不能这样发送数据。如果使用ajax提交表单，那么可以在那里绑定值。如果不想显示输入字段，则使用隐藏输入字段。这可能是你的解决方案。

Answer 3

您可以使用jquery

例如你有这个图像<img src="storage/pic1.png" alt="shoe picture">

添加id属性:

<img src="storage/pic1.png" alt="shoe picture" id="myImg">

所以你可以像这样访问jquery中的元素:$('#myImg')

，可以通过ajax发送给控制器但请注意，您需要定义它并将图像添加到formData和append()，然后将其发送到控制器

$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
}
});

Answer 4

No。您需要将这些值放入input[type=hidden]字段，或者您将通过使用FormData的异步请求(AJAX)发送它们。

简而言之，您需要提交包含所需值的表单。

const formData = new FormData();
formData.append("img", "my_image_src");
formData.append("text", "my_paragraph_content");
let response = await fetch('my_endpoint_here', {
method: 'POST',
body: formData
});
console.log(await response.json());