/ 知识库     / 试卷库

使用json实现前后端通信

JSON简介

JSON是一种轻量级数据交换格式,基于ECMAScript(欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。

例:

var obj={shuxing1:'123',shuxing2:'qwe'}; //js对象
var json='["shuxing1":"123","shuxing2";"qwe"]'; //JSON字符串
var jsonarr=[["a":"1"],{"c":"3”1];//JSON数组

JSON可理解为是一种严格的js对象的格式,JSON的属性名必须用双引号括起来,如果值是字符串,也必须用双引号括起来。

JSONP

JSONP (JSON WITH Padding) 是一种可避免引发跨域拒绝问题的传递json数据的方法。一种表现形式就是服务器后台在传递json数据前,先将json数据包裹在一个js函数名里,前端页面需要有这个js函数的同名函数,以便在接收到jsonp数据后能够正确处理。

json不能跨域直接获取,于是就将json包裹在一个合法的js语句中作为js文件传过去。这就是json和jsonp的区别,json是想要的数据,jsonp是实现跨域获取json数据的一种方法。

json返回的是一串数据;而jsonp返回的是脚本代码(包含一个函数调用)。

以登录验证为例,通过jsonp实现前后端数据通信。前端用js/jq实现,后端用servlet实现。

1、定义User类:bean/User

package bean;

public class User {
	private int id;
	private String email;
	private String pswd;
	private String loginName;
	private String realName;
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getPswd() {
		return pswd;
	}
	public void setPswd(String pswd) {
		this.pswd = pswd;
	}
	public String getLoginName() {
		return loginName;
	}
	public void setLoginName(String loginName) {
		this.loginName = loginName;
	}
	public String getRealName() {
		return realName;
	}
	public void setRealName(String realName) {
		this.realName = realName;
	}
}

2、定义Servlet类:servlet/UserServlet

package servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import bean.User;
import net.sf.json.JSONObject;

public class UserServlet extends HttpServlet{
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

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

	public void doGet(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		Connection con=null;
		PreparedStatement pstmt=null; 
		ResultSet rs=null; 
		User user=null;
		try{
			Class.forName("com.mysql.jdbc.Driver"); 
			String url="jdbc:mysql://localhost:3306/my_db?useUnicode=true";
			url+="&characterEncoding=utf-8&serverTimezone=Asia/Shanghai"; 
			con=DriverManager.getConnection(url,"root","");
		    pstmt=con.prepareStatement("select * from user where email=?");
		    pstmt.setString(1,(String)request.getSession().getAttribute("USERINSESSION"));
			rs=pstmt.executeQuery();
			if(rs.next()){
				user=new User();
				user.setId(rs.getInt("id"));
		        user.setEmail(rs.getString("email"));
		        user.setLoginName(rs.getString("loginName"));
		        user.setRealName(rs.getString("realName"));
		    }
		    Map<String, Object> dataMap = new HashMap<String, Object>();
			dataMap.put("obj", user);
			JSONObject jsonObject = JSONObject.fromObject(dataMap);

			String funString = request.getParameter("callback");
			response.setCharacterEncoding("UTF-8");
			PrintWriter writer = response.getWriter();
			writer.write(funString+"("+jsonObject+")");
			writer.close();
		}catch(Exception e){
		}finally{
			if(rs!=null)
				try {
					rs.close();
				} catch (SQLException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
			if(pstmt!=null)
				try {
					pstmt.close();
				} catch (SQLException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
			if(con!=null)
				try {
					con.close();
				} catch (SQLException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
		}
	}
}

3、部署class文件到站点

4、配置servlet应用(/WEB-INF/web.xml)

<?xml version="1.0" encoding="UTF-8"?>
<web-app>
    <servlet>
        <servlet-name>UserServlet</servlet-name>
        <servlet-class>servlet.UserServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>UserServlet</servlet-name>
        <url-pattern>/user</url-pattern>
    </servlet-mapping>
   
</web-app>

5、js实现

$.ajax({
        type:'GET',
        async:true,
        url:'/user',
        dataType:'jsonp',
        success:function(result){
            if(null==result.obj)
                window.location="/user/login.html";
            else
                $('#beValid').append(result.obj.email);
        },
});