Get elements with active class and send them in Ajax with jQuery

问题

If I have this 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>

How can I create an array with all the <a class="active"> through Ajax to play with them in PHP after ?

Thanks.

回答1:

You need to use formData to send the value and name data attribute of element having active class to your PHP back end file.

There is NO point creating an array and looping through that array again to send / create formData for ajax. That is totally unnecessary.

Please note: You can NOT send an array in an ajax request. So your probably need this solution as per your question.

Initialize formData and append your name and value attribute to it in a $.each and then send that formData using ajax

Working Demo:

//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>

回答2:

You can create normal array and then using each loop add value to that array or you can create JSON Array and push value like key-value pair using same each loop.

Demo Code :

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/get-elements-with-active-class-and-send-them-in-ajax-with-jquery