首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用active类获取元素,并使用jQuery在Ajax中发送它们

使用active类获取元素,并使用jQuery在Ajax中发送它们
EN

Stack Overflow用户
提问于 2020-09-27 11:29:54
回答 2查看 789关注 0票数 2

如果我有这个HTML:

代码语言:javascript
运行
复制
<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中使用它们呢?

谢谢。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-09-27 12:14:47

您需要使用formData将具有active类的元素的valuename数据属性发送到PHP后端文件。

创建array并再次遍历该array以发送/创建用于ajax的formData是有意义的。这完全没有必要。

请注意:您可以而不是ajax请求中发送array。所以你可能需要根据你的问题来解决这个问题。

初始化formData并将namevalue属性附加到$.each中,然后使用ajax发送该formData

工作演示:

代码语言:javascript
运行
复制
//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)
    }
  })
})
代码语言:javascript
运行
复制
<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>

票数 1
EN

Stack Overflow用户

发布于 2020-09-27 11:46:42

您可以创建普通数组,然后使用,每个循环向该数组添加值,也可以使用相同的每个循环创建、JSON、和push值,就像键值对一样。

演示代码

代码语言:javascript
运行
复制
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)
代码语言:javascript
运行
复制
<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>

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64087946

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档