无非借助于后端语言如Java，然后通过Servlet获取数据，浏览器端通过请求服务器，实现这一过程。而本篇将演示通过JS语言加载内存（实际上就是浏览器客户端逻辑）、本地（其实是服务器上的文件）及服务端（通过Servlet）数据。
先看一下页面设计（注意注释）：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>表单加载数据Demo</title> <!-- 以下四行代码用于导入EasyUI库 --> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <!-- script标签内部放置JS代码，因为EasyUI是基于jQuery开发的，所以基本上都是jQuery风格的代码 --> <script type="text/javascript"> </script> </head> <body> <h2>加载数据Demo</h2> <!-- 使用easyui-panel面板 --> <div class="easyui-panel" title="个人信息" style="width:100%;max-width:400px;padding:30px 60px;"> <!-- form的id为main_form --> <form id="main_form" method="post"> <div style="margin-bottom:24px"> <!-- 注意required:true是非常好用的一个data-options选项，保证该输入框不能为空 --> <input class="easyui-textbox" name="userName" style="width:100%" data-options="label:'姓名',required:true"> </div> <div style="margin-bottom:24px"> <input class="easyui-textbox" name="userEmail" style="width:100%" data-options="label:'邮箱',required:true,validType:'email'"> </div> <div style="margin-bottom:24px"> <!-- 此处使用easyui-combobox组件 --> <select class="easyui-combobox" name="userSex" label="性别" style="width:100%"> <option value="0">男</option> <option value="1">女</option> </select> </div> </form> </div> <div style="margin:32px 0;"> <!-- 此处注意使用javascript:void(0)比#要干净，因为使用#后网址栏多了个#--> <!-- 注意onclick绑定的js方法 --> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="loadMemory()">加载内存数据</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="loadFile()">加载文件数据</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="loadRemote()">加载后端数据</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearData()">清空数据</a> </div> </body> </html>
注意已经有了4个按钮，分别绑定了四个事件，接下来我们只需要在script标签中添加事件就好了，我们来逐个处理这些事件。
第一个，清空数据clearData，非常简单，这就是库（框架）的作用
/*选中main_form后直接调用form('clear')即可清空表单数据*/
function clearData(){
$('#main_form').form('clear');
}
1
2
3
4
第二个，加载内存数据：
/*加载内存数据，直接指定控件name对应的值即可*/
function loadMemory(){
$('#main_form').form('load',
{userName:'猫哥',userEmail:'maoge@maoge.com',userSex:'0'}
);
}
1
2
3
4
5
6
第三个，需要从文件中加载json格式的数据，首先在WebRoot下新建一个文件夹json，然后在json文件夹下新建user_data.json文件，代码如下，注意EasyUI能自动解析json，智能匹配表单，所以按照json的格式放好数据就OK了。
{
"userName":"test",
"userEmail":"maoge@maoge.com",
"userSex":"1"
}
1
2
3
4
5
/*加载文件数据，直接写文件路径即可*/
function loadFile(){
$('#main_form').form('load', 'json/user_data.json');
}
1
2
3
4
最后是从Servlet加载数据，新建一个UserServlet和User类如下（web.xml中配置对应url-pattern为/UserServlet）：
public class User { private String userName; private String userEmail; private String userSex; public String getUserName() { return userName; } public void setUserName(String userName) { this.userName = userName; } public String getUserEmail() { return userEmail; } public void setUserEmail(String userEmail) { this.userEmail = userEmail; } public String getUserSex() { return userSex; } public void setUserSex(String userSex) { this.userSex = userSex; } } 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; public class UserServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8"); request.setCharacterEncoding("utf-8"); response.setContentType("text/html"); PrintWriter out = response.getWriter(); User user=new User(); user.setUserEmail("panda@pp.com"); user.setUserName("熊猫大哥大"); user.setUserSex("0"); //此处需将user数据以json格式返回 } }
之前已经说过，EasyUI需要后台以json格式返回数据，于是首先在WebRoot下WEN-INF下lib下放入json需要的jar包（具体jar包自行搜索）。如图：
OK，此时将doPost完善为：
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 net.sf.json.JSONObject; public class UserServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8"); request.setCharacterEncoding("utf-8"); response.setContentType("text/html"); PrintWriter out = response.getWriter(); User user=new User(); user.setUserEmail("panda@pp.com"); user.setUserName("熊猫大哥大"); user.setUserSex("0"); //此处需将user数据以json格式返回 String result = JSONObject.fromObject(user).toString(); System.out.println(result);//测试 out.print(result); } }
OK，我们直接访问http://127.1.1.1:8080/EasyuiDemo/UserServlet页面返回值为{"userEmail":"panda@pp.com","userName":"熊猫大哥大","userSex":"0"}，可见该数据跟user_data.json数据格式都是json格式的，所以前端可直接写为：
/*通过servlet加载后端数据*/ function loadRemote(){ $('#main_form').form('load', '/EasyuiDemo/UserServlet'); }
至此我们应该完全了解了使用json的便捷性和锋利性，因为有了json这个标准以及Java语言（及各类后端语言）、Javascript语言（及各类前端框架）对json的支持，我们可以不用写任何代码完成json数据与前后端的交互，这就是标准（约定）的意义。
