JavaScript调用后台Servlet的两种实现方式

JavaScript调用Servlet的两种实现方式

在Web开发中，前端JavaScript与后端Servlet之间的数据交互是常见需求。实现这一目标主要有两种典型路径：一是通过原生表单提交机制，二是利用jQuery库进行异步AJAX请求。以下将分别介绍这两种方法的具体实现步骤与代码细节。

相关源码如下：

*.js

[javascript]

document.getElementById("sendPerson").value = SendPerson;
document.getElementById("currentTime").value = currentTime();
document.getElementById("message").value = message;
document.getElementById("recvPerson").value = recvPerson;
document.chatform.action = "ToHistoryServlet";
document.chatform.submit();
*.html

[html]

<!--the tag below is the params to the userHistory dml@2012.8.27-->
<input type="hidden" name="sendPerson" id="sendPerson"> <input
type="hidden" name="currentTime" id="currentTime"> <input
type="hidden" name="message" id="message"> <input
type="hidden" name="recvPerson" id="recvPerson">

需要注意的是，HTML中的input元素必须正确指定name属性，否则后端Servlet无法通过标准方式获取到对应的参数值。

*.java

[java]

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { www.jb51.net
String sendPerson = request.getParameter("sendPerson");
String recvPerson = request.getParameter("recvPerson");
String sendTime = request.getParameter("currentTime");
String message = request.getParameter("message");
Message msg = new Message();
msg.setMessage(message);
msg.setRecvPerson(recvPerson);
msg.setSendPerson(sendPerson);
msg.setSendTime(sendTime);
HistoryHandle.addMessage(msg);
} 

这种方法的缺点在于提交后页面会发生跳转。如果希望保持当前页面状态不变，可以参考第二种方法。

使用jQuery进行异步AJAX调用

2.jquery调用后台方法

[javascript]

$.ajax({
type : "POST",
contentType : "application/json",
url : "ToHistoryServlet?sendPerson=" + SendPerson + "¤tTime="
+ currentTime() + "&message=" + message + "&recvPerson="
+ recvPerson,
dataType : 'json',
success : function(result) {
alert(result.d);
    } 
}); 

代码量相对较少，使用便捷，值得在实际项目中推荐尝试。