您的位置：首页 > Web前端 > JQuery

servlet+jquery+ajax+json 例子

2012-05-14 14:26 363 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航