php - 如何通过多个类获取和发送 href 链接

Question

我有具有相同类名的项目列表 - “fileLink”

当我提交下面的表单时，我想通过 AJAX 将文件 URL 列表发送到 AJAX 文件(以及用户输入的电子邮件地址)。

如何按类名将数组发送到ajax文件？

<ul class="feeds" id="filesList">

    <li>
        <a href="http://file_folder/3604.jpg" target="_blank" class="fileLink">356458.e109abcc152f2536b969b32f6e8439e5</a>
        <span class="text-muted">DOC</span>
    </li>                                       
    <li>
        <a href="http://file_folder/3605.jpg" target="_blank" class="fileLink">357161.e4948db1d64c88b9396647aaa89a7f10</a>
        <span class="text-muted">jpg</span>
    </li>                                       
    <li>
        <a href="http://file_folder/3606.jpg" target="_blank" class="fileLink">357213.e109abcc152f2536b969b32f6e8439e5</a>
        <span class="text-muted">jpg</span>
    </li>   


   <form class="form-inline m-t-20" action="#" id="#emailFile-form">

       <a href="#" type="submit" class="btn btn-default" id="emailFile_btn">SEND</a>
   </form>

</ul>

Answer 1

我认为他的 fiddle 会让你开始:jsfiddle

首先，您必须更正表单的 html 代码:

<!-- not correct: id="#emailFile-form" -->
<form class="form-inline m-t-20" action="#" id="emailFile-form">
  <!-- use input or button to send form, not a -->
  <button href="#" type="submit" class="btn btn-default" id="emailFile_btn">SEND</button>
</form>

然后，您需要一个 JS 函数来监听表单发送时的情况，然后抓取具有指定类名的链接:

// get form element
var form = document.getElementById("emailFile-form");
// form controller
form.onsubmit = function(e){
  // stop form from sending
  e.preventDefault();
  var list = [];
  // grab all the links with class .fileLink
  var links = document.getElementsByClassName("fileLink");
  // put all links in the: list
  for (var i=0; i<links.length; i++)
    list.push( links[i].href );
  // send the list by ajax function
  ajaxSend(list);   
};

另外，不要忘记您需要定义一个执行实际 ajax 工作的函数:

function ajaxSend(data) {
    /** insert ajax code here **/
  alert("links: "+data.join(","));
}

在此处了解有关通过 ajax 发送数据的信息:

jQuery.ajax() documentation

或这里:

How to make an AJAX call without jQuery?