Java代码
- import
javax.servlet.http.HttpServlet; - import
javax.servlet.http.HttpServletResponse; - import
javax.servlet.http.HttpServletRequest; - import
java.io.IOException; - import
java.io.PrintWriter; - import
javax.servlet.ServletException; -
- import
net.sf.json.JSONArray; - import
net.sf.json.JSONObject; -
- public
class JqueryAjaxServer extends HttpServlet { -
private static final long serialVersionUID = 1L; -
-
public void doGet(HttpServletRequest request, HttpServletResponse response) -
throws IOException, ServletException { -
response.setContentType("text/html;charset=utf-8"); -
String account = request.getParameter("account"); -
-
JSONObject json = new JSONObject(); -
-
JSONArray array = new JSONArray(); -
JSONObject member = null; -
for (int i = 0; i < 3; i++) { -
member = new JSONObject(); -
member.put("name", "xiaohua"+i); -
member.put("age", 20+i); -
array.add(member); -
} -
-
json.put("account", account); -
json.put("jsonArray", array); -
-
PrintWriter pw = response.getWriter(); -
pw.print(json.toString()); -
-
System.out.println("json array :"+array.toString()); -
System.out.println("json object :"+json.toString()); -
-
pw.close(); -
} -
-
public void doPost(HttpServletRequest request, HttpServletResponse response) -
throws IOException, ServletException { -
this.doGet(request, response); -
} - }
5. jsp页面(jqueryAjax.jsp)
Html代码
- <%@
page language="java" pageEncoding="utf-8"%> - <!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> - <html>
- <head>
- <title>jquery
ajax</title> - <meta
http-equiv="pragma" content="no-cache"> - <meta
http-equiv="cache-control" content="no-cache"> - <meta
http-equiv="expires" content="0"> - <meta
http-equiv="keywords" content="keyword1,keyword2,keyword3"> - <meta
http-equiv="description" content="This is my page"> - <script
src="jquery/jquery-1.3.1.js" type="text/javascript"></script> - <script
language="javascript"> -
$(function(){ -
$('.sumbit').click(function(){ -
if($('#account').val().length==0){ -
$('.hint').text("用户名不能位空").css({"background-color":"green"}); -
}else{ -
$.ajax({ -
url:'jqueryAjax', -
data:{account:$('#account').val()}, -
dataType:'json', //很重要!!!. 预期服务器返回的数据类型 -
error:function(){ -
alert("error occured!!!"); -
}, -
success:function(data){ -
$.each(data.jsonArray,function(index){ -
$.each(data.jsonArray[index],function(key,value){ -
alert(key+":"+value) -
}); -
}); -
-
$('body').append("<div>"+data.account+"</div>").css("color","red"); -
} -
}); -
} -
}); -
}); - </script>
- </head>
-
- <body>
- <h3
align="center">jquery AjaX</h3> - <hr>
- <label>请输入你的账户
:</label> - <input
id="account" name="account" type="text"> - <input
class="sumbit" type="button" value="检测"> - <div
class="hint"></div> - </body>
- </html>
6. 配置文件web.xml
Xml代码
- <?xml
version="1.0" encoding="UTF-8"?> - <web-app
version="2.5" -
xmlns="http://java.sun.com/xml/ns/javaee" -
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" -
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee -
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> -
<servlet> -
<servlet-name>jqueryAjaxServer</servlet-name> -
<servlet-class>com.june.servlet.JqueryAjaxServer</servlet-class> -
</servlet> -
<servlet-mapping> -
<servlet-name>jqueryAjaxServer</servlet-name> -
<url-pattern>/jqueryAjax</url-pattern> -
</servlet-mapping> -
<welcome-file-list> -
<welcome-file>index.jsp</welcome-file> -
</welcome-file-list> - </web-app>