servlet+jquery+ajax+json 例子

最新推荐文章于 2022-05-17 22:20:25 发布

xiaofeng024

最新推荐文章于 2022-05-17 22:20:25 发布

阅读量402

点赞数

分类专栏： java

java 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

servlet+jquery+ajax+json 例子

、

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>