Ajax没有调用servlet
我的web.xml:
<web-app xmlns="http://java.sun.com/xml/ns/javaee" version="2.5">
<servlet>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>com.web.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/LoginServlet</url-pattern>
</servlet-mapping>
</web-app>
剧本:
//function to check name and comment field
function checkCommentsForm(){
if(userName.attr("value") && userPass.attr("value"))
{
alert("true returned");
return true;
}
else
{
alert("fasle returned");
return false;
}
}
//When form submitted
$("#formL").submit(function(){
if(checkCommentsForm()){
$.ajax({
type:"POST",
url:"/LoginServlet/",
data:"user="+userName.val()+"&pass="+userPass.val(),
success: function(msg) {$('#targetDiv').hide();$("#targetDiv").html ("<h3>" + msg + "</h3>").fadeIn("slow");
}
});
alert('ppppppppppppppppp----------');
}
else
alert("Please fill UserName & Password!");
return false;
});
});
表格:
<div>
<form id="formL" name="formL" method="post" onsubmit="return false;">
<span class="style3"><strong>Enter Username &
Password to Login : </strong></span><br> <br> <span class="style1">Username : </span>
<input name="user" id="user" type="text"> <br>
<span class="style1">Password :</span> <input name="pass" id="pass" type="password"> <br>
<input name="button" id="button" value="Submit" type="submit">
</form>
</div>
<div id="targetDiv" style="display: none;"></div>
警报如下:
**The servlet are working but through ajax it was not called any clue what happen ?**
答案 0 :(得分:2)
在webbrowser的开发人员工具集的“网络”部分中阅读HTTP流量监视器(在Chrome / IE9 / Firefox中按F12)。您应该已经注意到ajax请求已返回HTTP 404响应,该响应基本上是“找不到页面”错误。
您已经指定了一个与域相关的servlet URL,前缀为/
。想象一下,JSP已在http://localhost:8080/context/login.jsp
上打开,然后/LoginServlet
的servlet URL会将HTTP请求发送到http://localhost:8080/LoginServlet
,而您确实需要将其发送到http://localhost:8080/context/LoginServlet
相应修复:
url: "LoginServlet"
无关,整个设计很奇怪,并没有真正逐步增强。即当最终用户禁用JS时,整个表单根本不起作用。您应该始终使用完全正常工作的表单,而不需要任何单行JavaScript。
假设一个基本启动示例为
<form id="login" action="login" method="post">
<input type="text" name="user" />
<input type="password" name="pass" />
<input type="submit" value="Login" />
<span id="message">${message}</span>
</form>
然后你可以用一种可重复使用的方式增强如下:
$("#login").submit(function() {
var $form = $(this);
$.post($form.attr("action"), $form.serialize(), function(data) {
// ...
});
return false;
});
请注意$.serialize()
以适当的方式透明地序列化所有表单数据。你完全没有对用户/通过请求参数进行URL编码,当最终用户在用户名和/或密码中使用URL不安全的特殊字符时,这些参数会破坏表单提交。