How can i call servlet on button click aem - servlets

Question

i have servlet
#Component(service={Servlet.class},
property={"sling.servlet.methods=get",
"sling.servlet.resourceTypes=/content/wknd-events"})
public class MainServlet extends SlingAllMethodsServlet
{
#Reference
DemoInterfaceImpl demoInterface;
protected void doPost(SlingHttpServletRequest request, SlingHttpServletResponse response) throws IOException {
demoInterface.redirectUser(request,response);
}
}
demoInterface
#Component(
service= IDemoInterface.class,
immediate = true)
public class DemoInterfaceImpl implements IDemoInterface {
#Override
public void redirectUser(final SlingHttpServletRequest req,
final SlingHttpServletResponse resp) throws IOException {
resp.sendRedirect("/content/we-retail/us/en.html");
}
}
and i have my component
<a href="/content/wknd-events.html">
<button> go</button>
</a>
i want to redirect to /content/we-retail/us/en.html on button click but it doesn't work. I still go to /content/wknd-events.html. I don't understand where is my mistake

Answer 1

Your basic mistake is here "sling.servlet.resourceTypes=/content/wknd-events"})
The resourceType in Sling is the resourceType property set on the resources/nodes. So, if you register a servlet based on resourceType, it will get invoked only if you have the component or resource of that type. In your case , the servlet is registered with a content path as resourceType . Instead of sling.servlet.resourceTypes ; you can try sling.servlet.paths (e.g "sling.servlet.paths=/bin/test") and register your servlet to a path. Instead of giving a href attribute in the <a> tag, write an AJAX call on the click event of the button and give the servlet path as the URL.
$.ajax({
type: 'GET',
url:'/bin/test',
success: function(msg){
<!-- some code -->
}
});