Question

我想使用jQuery发送Ajax GET请求，并且需要将实体的ID发送到控制器。我正在使用 thymeleaf th:each循环显示实体。我编写的代码适用于第一个实体，但不适用于其他实体。

以下是HTML页面代码：

<div th:each="course : ${session.courses}" >
        <img th:src="@{'/images/' + ${course.image.imageURL}}" alt="">
        <h3 class="text-dark" id="course-id" th:text="${course.courseId}" style="display: none;" ></h3>
        <h3 class="text-dark" th:text="${course.courseName}"></h3>
        <p class="mt-3 mb-4 pl-lg-4" th:text="${course.title}"></p>
        <a th:text="${course.courseDuration}"></a>
        <a th:text="${course.noOfSets}"></a>
        <a class="btn button-cour-w3ls text-white" th:href="@{'course_details?cid='+${course.courseId}}" role="button">Learn More</a>
        <a class="btn bg-dark text-white" id="apply-course"  role="button">Apply Now</a>
</div>

这是jQuery代码：

$("#apply-course").click(function(e){
    e.preventDefault();
    var courseId = $("#course-id").text();
    var data="/?cid="+courseId;
    $.ajax({
        url : "/course/apply_course/"+data,
        type : "GET",
        success : function(result){
            if(result.status){
                alert("Data transfer successfull");
            }
            else{
                alert(result.message);
            }
        }

    });
});

请帮助我解决这个问题。

Answer 1

您要查询的ID id="apply-course"由于循环而出现多次。尝试改用类。

<h3 class="text-dark" **class**="course-id" ...
...
<a class="btn bg-dark text-white" id="apply-course"  role="button">Apply Now</a>

然后在您的js中

$(".apply-course").click(function(e) { // .apply-course
e.preventDefault();
var courseId = $(this).parent().find('.course-id').text(); // $(this) instead of query id
...

最后的笔记：它叫jQu e 和我的朋友：D

jQuery：如何使用id获取当前标签的文本？

1 个答案: