我有一个具有相同类名的项目列表-“ fileLink”
当我提交下面的表格时,我想通过AJAX发送到AJAX文件的文件URL列表(以及用户键入的电子邮件地址)。
如何通过类名将数组发送到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>
答案 0 :(得分:2)
我认为他的小提琴会让您入门:jsfiddle
首先,您必须更正form
的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发送数据的信息:
或此处: