用JSON格式提交数据到服务端

朴灿烈づ我的快乐病毒、 2022-05-28 07:36 183阅读 0赞

准备Hero.java

public class Hero {
    	private String name;
    	private int hp;
    	public String getName() {
    		return name;
    	}
    	public void setName(String name) {
    		this.name = name;
    	}
    	public int getHp() {
    		return hp;
    	}
    	public void setHp(int hp) {
    		this.hp = hp;
    	}
    	@Override
    	 public String toString() {
    	        return "Hero [name=" + name + ", hp=" + hp + "]";
    	    }
    }

submit.html文件

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <title>用AJAX以JSON方式提交数据</title>  
    <script type="text/javascript" src="jquery.min.js"></script>  
    </head>  
    <body>  
        <form >  
           名称：<input type="text" id="name"/><br/>  
            血量：<input type="text" id="hp"/><br/>  
            <input type="button" value="提交" id="sender">   
        </form>  
        <div id="messageDiv"></div>  
          
        <script>  
        $('#sender').click(function(){  
            var name=document.getElementById('name').value;  
            var hp=document.getElementById('hp').value;  
            var hero={"name":name,"hp":hp};  
            var url="submitServlet";  
              
            $.post(
            		url, 
            		{"data":JSON.stringify(hero)},
            		function(data) {  
    		             alert("提交成功，请在Tomcat控制台查看服务端接收到的数据");
             });   
    
              
        });  
        </script>  
    </body>  
      
    </body>
    </html>

JSON.stringify函数的作用是将一个javascript对象，转换为JSON格式的字符串。

准备SubmitServlet用来接收数据

import java.io.IOException;
     
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
     
    import net.sf.json.JSONObject; 
       
    public class SubmitServlet extends HttpServlet { 
        protected void service(HttpServletRequest request, HttpServletResponse response) 
                throws ServletException, IOException {
            String data =request.getParameter("data");
             
            System.out.println("服务端接收到的数据是：" +data);
      
            JSONObject json=JSONObject.fromObject(data); 
              
            System.out.println("转换为JSON对象之后是："+ json);
               
            Hero hero = (Hero)JSONObject.toBean(json,Hero.class); 
            System.out.println("转换为Hero对象之后是："+hero);
        } 
    }

1. 获取浏览器提交的字符串  
2. 把字符串转换为JSON对象

3. 把JSON对象转换为Hero对象

最后配置web.xml

启动tomcat访问http://127.0.0.1:8080/项目名/submit.html

![70][]

在tomcat控制台看到传来的数据

![70 1][]

获取一个对象

准备GetOneServlet

import java.io.IOException;
    import java.io.Writer;
     
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
     
    import net.sf.json.JSONObject; 
       
    public class GetOneServlet extends HttpServlet { 
        protected void service(HttpServletRequest request, HttpServletResponse response) 
                throws ServletException, IOException {
              
            Hero hero = new Hero();
            hero.setName("盖伦");
            hero.setHp(353);
             
            JSONObject json= new JSONObject();
       
            json.put("hero", JSONObject.fromObject(hero));
            response.setContentType("text/html;charset=utf-8"); 
            response.getWriter().print(json);
        } 
    }

web.xml

getOne.html

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>用AJAX以JSON方式获取数据</title> 
    <script type="text/javascript" src="jquery.min.js"></script> 
    </head> 
    <body> 
        <input type="button" value="通过AJAX获取一个Hero对象" id="sender">  
       
        <div id="messageDiv"></div> 
           
        <script> 
        $('#sender').click(function(){ 
            var url="getOneServlet"; 
            $.post(
                    url,
                    function(data) {
                         var json=JSON.parse(data); 
                         var name =json.hero.name; 
                         var hp = json.hero.hp;
                         $("#messageDiv").html("英雄名称："+name + "<br>英雄血量:" +hp );
                          
             });  
        }); 
        </script> 
    </body> 
       
    </body>
    </html>

测试(重启tomcat)

启动tomcat访问http://127.0.0.1:8080/项目名/getOne.html

![70 2][]

3 获取多个对象

import java.io.IOException;
    import java.util.ArrayList;
    import java.util.List;
     
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
     
    import net.sf.json.JSONSerializer; 
       
    public class GetManyServlet extends HttpServlet { 
        protected void service(HttpServletRequest request, HttpServletResponse response) 
                throws ServletException, IOException {
            List<Hero> heros = new ArrayList<>();
            for (int i = 0; i < 10; i++) {
                Hero hero = new Hero();
                hero.setName("name"+i);
                hero.setHp(500+i);
                heros.add(hero);
            }
             
            String result =JSONSerializer.toJSON(heros).toString();
     
            response.setContentType("text/html;charset=utf-8"); 
            response.getWriter().print(result);
        } 
        public static void main(String[] args) {
            List<Hero> heros = new ArrayList<>();
            for (int i = 0; i < 10; i++) {
                Hero hero = new Hero();
                hero.setName("name"+i);
                hero.setHp(500+i);
                heros.add(hero);
            }
             
            System.out.println(JSONSerializer.toJSON(heros).toString());
        }
    }

web.xml

<?xml version="1.0" encoding="UTF-8"?>
    <web-app>
     
        <servlet>
            <servlet-name>SubmitServlet</servlet-name>
            <servlet-class>SubmitServlet</servlet-class>
        </servlet>
     
        <servlet-mapping>
            <servlet-name>SubmitServlet</servlet-name>
            <url-pattern>/submitServlet</url-pattern>
        </servlet-mapping>
        <servlet>
            <servlet-name>GetOneServlet</servlet-name>
            <servlet-class>GetOneServlet</servlet-class>
        </servlet>
     
        <servlet-mapping>
            <servlet-name>GetOneServlet</servlet-name>
            <url-pattern>/getOneServlet</url-pattern>
        </servlet-mapping>
        <servlet>
            <servlet-name>GetManyServlet</servlet-name>
            <servlet-class>GetManyServlet</servlet-class>
        </servlet>
     
        <servlet-mapping>
            <servlet-name>GetManyServlet</servlet-name>
            <url-pattern>/getManyServlet</url-pattern>
        </servlet-mapping>
     
    </web-app>

getMany.html

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>用AJAX以JSON方式获取数据</title> 
    <script type="text/javascript" src="jquery.min.js"></script> 
    </head> 
    <body> 
        <input type="button" value="通过AJAX获取多个Hero对象" id="sender">  
       
        <div id="messageDiv"></div> 
           
        <script> 
        $('#sender').click(function(){ 
            var url="getManyServlet"; 
            $.post(
                    url,
                    function(data) {
                        var heros = $.parseJSON(data);
                         for(i in heros){
                             var old = $("#messageDiv").html();
                             var hero = heros[i];
                             $("#messageDiv").html(old + "<br>"+hero.name+"   -----   "+hero.hp); 
                         }
             });  
        }); 
        </script> 
    </body> 
       
    </body>
    </html>

测试(重启tomcat)

启动tomcat访问http://127.0.0.1:8080/项目名/getMany.html

![70 3][]

[70]: /images/20220528/ed968dd899c64c048cd6d081917df66f.png
[70 1]: /images/20220528/ddef933ecbd84521acda0b74e91f5cf8.png
[70 2]: /images/20220528/ce909e8f7e8949a0ad514a9ead69ea1e.png
[70 3]: /images/20220528/be924296679d4d78a7eb86b81ba81710.png