Ajax 与后台 HttpServlet 的简单交互
架构:
------------------------------------------------------
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>zy-ajax</display-name>
<servlet>
<description></description>
<display-name>TestAjax</display-name>
<servlet-name>TestAjax</servlet-name>
<servlet-class>zy.test.ajax.TestAjax</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>TestAjax</servlet-name>
<url-pattern>/testAjax</url-pattern>
</servlet-mapping>
</web-app>
-------------------------------------------------------------
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){ //这是jQuery的初始化函数,页面一加载后就开始
$("#button").click(function(){ //from表单中:,$("#button"):通过选择器绑定鼠标点击事件
//alert( $("form").attr("action"));
$.ajax({
type : "POST", //发送请求的方法
url : $("form").attr("action"), //获取form表单中发送请求的地址
dataType : 'text', ///预期服务器返回的数据类型
data : {
username : $(":text").val(), //拿到输入框的输入的值 :text 是type 的类型;
password : $(":password").val(),
},
success : function(data) { //请求成功后回调函数。参数:服务器返回数据,数据格式
var data = eval("(" + data + ")"); ///解析获取的数据
var username = data.username;
var password = data.password;
//username = decodeURI(username);
//password = decodeURI(password);
var txtHtml = "<div class='comment'><h3>" + username
+ ":</h3><p class='para'>" + password + "</p></div>";
$("#resText").html(txtHtml); // 把返回的数据添加到页面上
},
error : function(t) { //请求失败时调用时间。参数:XMLHttpRequest 对象、错误信息、(可选)捕获的错误对象
alert("error,格式或数据返回出错");
}
});
return false;
});
});
</script>
<body>
<form action="testAjax" method="POST">
username:<input type="text" name="username"/><br/>
password:<input type="password" name="password"/><br/>
<button id="button">button here!</button>
<span id="resText"></span>
</form>
</body>
</html>
------------------------------------------
TestAjax.java
package zy.test.ajax;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class TestAjax extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// System.out.println("i'm going here!"); 测试页面到后台是否实现;
String username=request.getParameter("username"); //接收页面传入的两个值
String password=request.getParameter("password");
System.out.println("username="+username+"; password="+password);
//以上实现了页面传值到后台成功,一下部分是通过拼接字符串的格式将值返回给页面;
try {
//拼接;
String json="{succes:true,username:'"+username+"',password:'"+password+"'}";
//response.getWriter().write("");封装格式返回页面;
response.getWriter().write(json);
} catch (Exception e) {
e.printStackTrace();
}
}
}
--------------------------------------------------------
页面运行效果:
这是非常简单的入门程序测试,(当然还有很多其他方式可以实现)没有多大技术含量,有改进之处望指点,谢谢;