如果我有这个HTML:
<form>
<a href="#" data-name="color" data-value="yellow" class="active">
<a href="#" data-name="color" data-value="red">
<a href="#" data-name="color" data-value="orange">
<a href="#" data-name="fruit" data-value="banana" class="active">
<a href="#" data-name="fruit" data-value="apple">
<buton id="send">Send</button>
</form>
我如何通过Ajax创建一个包含所有<a class="active">
的数组,然后在PHP中使用它们呢?
谢谢。
发布于 2020-09-27 12:14:47
您需要使用formData将具有active
类的元素的value
和name
数据属性发送到PHP
后端文件。
创建array
并再次遍历该array
以发送/创建用于ajax的formData
是有意义的。这完全没有必要。
请注意:您可以而不是在ajax
请求中发送array
。所以你可能需要根据你的问题来解决这个问题。
初始化formData
并将name
和value
属性附加到$.each
中,然后使用ajax
发送该formData
工作演示:
//Initilize formData
var formData = new FormData()
//Each through elements
$('a').each(function(index, element) {
//check all element with class active only
if ($(element).attr('class') == 'active') {
//append active class data-name and value
formData.append($(element).data('name'), $(element).data('value'))
}
})
//Click event
$('#send').click(function(e) {
e.preventDefault()
// Display the key/value pairs of formData - demo only
for (var pair of formData.entries()) {
console.log(pair[0] + ', ' + pair[1]);
}
//call ajax on send button click
$.ajax({
url: 'some_url.php',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(data) {
console.log(data)
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm" method="post" enctype="multipart/form-data">
<a href="#" data-name="color" data-value="yellow" class="active">
</a>
<a href="#" data-name="color" data-value="red">
</a>
<a href="#" data-name="color" data-value="orange">
</a>
<a href="#" data-name="fruit" data-value="banana" class="active"></a>
<a href="#" data-name="fruit" data-value="apple">
</a>
<button id="send">Send</button>
</form>
发布于 2020-09-27 11:46:42
您可以创建普通数组,然后使用,每个循环向该数组添加值,也可以使用相同的每个循环创建、JSON、和push值,就像键值对一样。
演示代码:
var arr = [] //create arry
$("form > a.active").each(function() {
arr.push($(this).attr('data-value')) //push value in array
})
console.log(arr)
var json_array = [];
$("form > a.active").each(function() {
item = {}; //object create
item[$(this).attr('data-name')] = $(this).attr('data-value')
json_array.push(item) //push value in array
});
console.log(json_array)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<a href="#" data-name="color" data-value="yellow" class="active"> </a>
<a href="#" data-name="color" data-value="red"> </a>
<a href="#" data-name="color" data-value="orange"> </a>
<a href="#" data-name="fruit" data-value="banana" class="active"> </a>
<a href="#" data-name="fruit" data-value="apple">
</a>
<button id="send">Send</button>
</form>
https://stackoverflow.com/questions/64087946
复制相似问题