将数据表单 javascript 发送到 servlet：获取有关按钮旁边嵌套元素的数据

Question

我有一个简单的 html，带有一个视频 div 和一个按钮：

<div class = "video-row">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/QmHCn5xXHjI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div class="add-button green-button light-button">Add video</div>


</div>

我想在单击按钮时将视频的 src 数据发送到 java servlet：

$(document).on("click", ".add-button", function () {  
           sendData();
});

var sendData = function()  {
    $.ajax({
        url: "addcomedian",
        type: "post", //send it through get method
        data: {
            number: 4,
            sender: "add-button",
            url: url,
        },
     success:
        ...
}

如何获取视频的url，即src标签的值？页面上会有很多这样的视频，每个视频都有一个添加按钮。

Answer 1

找到点击的元素父元素，然后找到 iframe 子元素：

$(document).on("click", ".add-button", function (event) {  
  var button = $(event.target); // Find the button that was clicked
  // Find the video element, first finding the parent
  var videoElement = button.parents(".video-row").find("iframe");
  console.log(videoElement.attr("src")); // get the 'src' attribute
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "video-row">
  <iframe width="160" height="90" src="https://www.youtube.com/embed/QmHCn5xXHjI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  <div class="add-button green-button light-button">Add video</div>
</div>

将数据表单 javascript 发送到 servlet：获取有关按钮旁边嵌套元素的数据

Sending data form javascript to servlet: getting the data about a fellow nested element next to a button

javascript

java

servlets