JQuery+JS+JSON+Servlet实例

最新推荐文章于 2023-06-24 21:44:10 发布

会飞的马

最新推荐文章于 2023-06-24 21:44:10 发布

阅读量3.4k

点赞数 3

分类专栏： Web前端文章标签： json 实例 ajax jquery servlet

本文链接：https://blog.csdn.net/u010371710/article/details/46006453

版权

Web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JQuery+JS+JSON+Servlet实例

最近在大神的帮助下，学到了一些关于Servlet方面的知识。学的不太深入，但是个人认为还是需要将知识整理一下。写了一个JQuery+JS+JSON+Servlet的小例子。例子比较简单，大神请绕道。
一、 Jquery
与Jquery ajax相关的知识，请参考下面的网址：
http://jun1986.iteye.com/blog/1399242
在这里要特别注意的是$.ajax的一般格式：

$.ajax({
     type: 'POST',
     url: url ,
     data: data ,
     success: success ,
     dataType: dataType
});

各个参数所代表的含义请参考该文章。
二、 Servlet
与Servlet相关的知识请参考下面的网址：
http://www.cnblogs.com/goody9807/archive/2007/06/13/782519.html
上面的网址介绍了Servlet应用最基本的一个例子，其中需要注意的是，在Servlet3.0中，因为有了@WebServlet(“/gprmcServlet”)的存在，所以就不需要再到web.xml里面对Servlet进行配置，甚至在eclipse里面新建servlet文件时都不会默认新建出web.xml，省去了配置的麻烦。Servlet里面很重要的两个函数就是doGet()和doPost()。当发出客户端请求的时候，调用service方法并传递一个请求和响应对象。Servlet首先判断该请求是GET 操作还是POST 操作。然后它调用下面的一个方法：doGet 或 doPost。如果请求是GET就调用doGet方法，如果请求是POST就调用doPost方法。这在后面的ajax中会有具体的例子。doGet和doPost都接受请求 (HttpServletRequest)和响应(HttpServletResponse)。doGet方法,在地址栏中显示请求的内容,doPost隐藏.一般来说我们是用不到doGet方法的，doGet方法提交表单的时候会在url后边显示提交的内容，所以不安全。而且doGet方法只能提交256个字符(1024字节)，而doPost没有限制，因为get方式数据的传输载体是URL（提交方式能form，也能任意的URL链接），而POST是HTTP头键值对（只能以form方式提交）。通常我们使用的都是doPost方法，你只要在servlet中让这两个方法互相调用就行了，例如在doGet方法中这样写

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request,response);
}

doGet与doPost的区别具体请参见：
http://blog.163.com/grandry_it_bird/blog/static/1751633362010102615553610/
三、小实例
首先需要下载导入的包为json.jar和jquery-1.8.0.js。
新建动态web工程Gdemo。工程的结构如下。
这里写图片描述
然后新建一个Servlet文件：DemoServlet.java。代码如下：

package com.cug.demo;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

/**
 * Servlet implementation class DemoServlet
 */
@WebServlet("/DemoServlet")
public class DemoServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public DemoServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doPost(request,response);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub

        //json在这里存放的是数组信息
        JSONObject json=new JSONObject();
        JSONArray array=new JSONArray();

        //两个数据
        JSONObject temp1=new JSONObject();
        JSONObject temp2=new JSONObject();

        try {
            //第一个name和sex
            temp1.put("name", "Jhon");
            temp1.put("sex", "man");
            array.put(0,temp1);

            //第二个name和sex
            temp2.put("name", "Mary");
            temp2.put("sex", "woman");
            array.put(1,temp2);     

            //添加到json中
            json.put("people", array);
        } catch (JSONException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        //向前台的页面输出结果
        PrintWriter out=response.getWriter();
        out.println(json);
        out.close();
    }

}

在这里需要注意的一个问题是json.jar导入的位置。不能直接右键工程然后在Build Path里面添加，这样会出现下面的错误，会导致Tomcat一直运行不成功：

这里写图片描述

应该向前面的截图那样放在WEB-INF里面的lib中，这样才不会出错。
右键DemoServlet.java，运行到Tomcat上，在浏览器上输入：
http://localhost:8080/Gdemo/DemoServlet
就可以得到输出的json数据。如图：

这里写图片描述

新建html文件：demo.html。代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery/jquery-1.8.0.js" type="text/javascript"></script>  
<script type="text/javascript" src="init.js" ></script>
<title>来自Servlet的信息</title>
</head>
<body>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>

就是一个显示的功能。在这个html里面引入了外部的js文件：init.js。虽然init.js的代码很少很简单，但是我还是将它放在了外面，没有和html放在一起。这样能形成一个好的习惯，放在外面能够更加的清楚也便于调试。
新建init.js文件，代码如下：

function myFunction(){
    $.ajax({
        dataType:"json",    //数据类型为json格式
        type:"post",            //传输方式为post，所以我们在servlet里面代码是写在doPost()函数中
        url:"http://localhost:8080/Gdemo/DemoServlet",      //这就是使用的servlet的url
        success:function(data){
            //遍历传过来的数据
            $.each(data.people,function(index,item){
                alert(item.name+","+item.sex);
            });
        }
    });
}

将demo.html部署到Tomcat上去。在浏览器上输入
http://localhost:8080/Gdemo/demo.html
结果如图：

这里写图片描述

点击按钮，数据显示在弹框上：
这里写图片描述

这里写图片描述

会飞的马

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
JQuery+JS+JSON+Servlet实例

JQuery+JS+JSON+Servlet小实例最近在大神的帮助下，学到了一些关于Servlet方面的知识。学的不太深入，但是个人认为还是需要将知识整理一下。写了一个JQuery+JS+JSON+Servlet的小例子。
复制链接

扫一扫