zoukankan      html  css  js  c++  java
  • JSON 在Ajax数据交换中的简单运用

    随着浏览器内核更新,原先的json.js在最新的谷歌浏览下不管用了,运行报错,特此修改下代码,不使用json.js,使用Object自带的json转换方法,修改时间,2016年10月26日.

    首先需要创建一个Servlet类,命名为JSONTest.java. 然后配置下web.xml文件,我的是自动生成的,也就没改动.web.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>
        <description>This is the description of my J2EE component</description>
        <display-name>This is the display name of my J2EE component</display-name>
        <servlet-name>JSONTest</servlet-name>
        <servlet-class>servlet.ajax.JSONTest</servlet-class>
      </servlet>
      <servlet-mapping>
        <servlet-name>JSONTest</servlet-name>
        <url-pattern>/servlet/JSONTest</url-pattern>
      </servlet-mapping>
      <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
      </welcome-file-list>
    </web-app>
    

    接下来,就是创建JS文件了,命名为yulei.js,其中的url是访问上面的servlet的路劲.js内容如下:

    function Car(make,model,year,color){      
        this.make=make;  
        this.model=model;  
        this.year=year;  
        this.color=color;  
    }  
    
    
    function sendRequest(){  
        var car=new Car('Dodge','Cornet RT',2009,'yellow');  
     //   var pars="car="+car.toJSONString();  
          var pars="car="+Object.toJSON(car);
        var url="servlet/JSONTest";  
        var mailAjax= new Ajax.Request(  
               url,  
               {   
                 method:'get',  
                 parameters:pars,  
                 onComplete:jsonResponse,  
                 onException: function(x, e) { alert(e) }
               }  
            );  
    }  
      
    function jsonResponse(originalRequest){  
        alert(originalRequest.responseText);  
        var myObj=originalRequest.responseText.parseJSON();  
        alert(myObj.name);  
    }  
    


    然后,新建一个jsonTest.jsp文件,里面主要是加载一些js文件,和一个按钮,内容如下:

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <base href="<%=basePath%>">
        
        <title>My JSP 'jsonTest.jsp' starting page</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">
    	<!--
    	<link rel="stylesheet" type="text/css" href="styles.css">
    	-->
          <script type="text/javascript" src="js/prototype.js"></script>  
    <!--      <script type="text/javascript" src="js/json.js"></script>  
     -->      <script type="text/javascript" src="js/yulei.js"></script>  
      </head>
      
      <body>
            This is my JSP page. <br>  
           <input type="button" value="测试" onclick="sendRequest()"/>  
      </body>
    </html>
    

    最后,我们就编写Servlet类的内容:

    package servlet.ajax;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.json.JSONException;
    import org.json.JSONObject;
    
    public class JSONTest extends HttpServlet {
    
    
    	public void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
             
    		request.setCharacterEncoding("UTF-8");
    		response.setCharacterEncoding("UTF-8");
    		PrintWriter out = response.getWriter();
    		
    		String s3=request.getParameter("car");
    		System.out.println(s3);
    		try {
    			JSONObject jsonObject=new JSONObject(s3);
    			System.out.println(jsonObject.getString("model"));
    			System.out.println(jsonObject.getString("year"));
    		} catch (JSONException e) {
    			e.printStackTrace();
    		}
    		
    		JSONObject resultJSON=new JSONObject();
    		try {
    			resultJSON.append("name", "violet");
    			resultJSON.append("occupation", "developer");
    			resultJSON.append("age", new Integer(22));
    		} catch (JSONException e) {
    			e.printStackTrace();
    		}
    		
    		out.print(resultJSON.toString());
    	}
    }

    这个Servlet的功能是:首先获取前台JS ajax请求传来的JSON数据,将其中的某些属性打印出来(你也可以Debug查看),然后重新新建一个JSON对象,并将其以字符串的形式传到前台,我们就可以获取到这个新建的JSON数据.

    这就是简单的JSON在AJAX请求中数据传输的作用.

     


     

  • 相关阅读:
    threading学习
    Python基础-5
    BS4
    requests基础
    Python基础-4
    Python基础-3
    Python基础-2
    Python基础-1
    DevOps
    nginx配置ssl证书实现https
  • 原文地址:https://www.cnblogs.com/wuyida/p/6300399.html
Copyright © 2011-2022 走看看