I am currently developing a web application and delving into the intricacies of how Ajax functions within it. I am encountering an issue where nothing occurs when I attempt to select a category, and no errors are being reported.
Within my JSP page:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<link media="all" rel="stylesheet" type="text/css" href="resources/css/all.css" />
<script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"/>
<script type="text/javascript">
var categoryName;
$(document).ready(function () {
function doAjaxPost(){
categoryName = $('#selectCategory').val();
$.ajax({
type : "Get",
url : "loadProducts",
data : "Category selected =" + categoryName,
success : function(response) {
alert(response);
},
error : function(e) {
alert('Error: ' + e);
}
});
}
});
$("#selectCategory").on("change", doAjaxPost());
</script>
<title>Waiter</title>
</head>
<body>
<h3>Waiter's page </h3>
<h2>
Welcome : ${pageContext.request.userPrincipal.name}
<a href="/logout" class="btn-on">Logout</a>
</h2>
<br>
<c:if test="${!empty productCategoriesList}">
<spring:message code="label.category" />
<select id="selectCategory" name="productCategory">
<option value=" "></option>
<c:forEach items="${productCategoriesList}" var="productCategory">
<option value=${productCategory.id}>${productCategory.productType}</option>
</c:forEach>
</select>
</c:if>
<div id = "product">
<spring:message code="label.product" />
<select>
<option value = ""></option>
</select>
</div>
Regarding my Spring Controller:
@RequestMapping(value = "/loadProducts")
public @ResponseBody String loadProducts(@RequestParam("categoryName")
String categoryName){
System.out.println(categoryName);
String str = "Category selected: " + categoryName;
return str;
}
What steps need to be taken to ensure the proper functionality of this operation?