jQueryEasyUI详解-EasyUI表单加载内存/本地/服务端数据

17-03-16 来源：[db:作者]

收藏我要投稿

jQueryEasyUI详解-EasyUI表单加载内存/本地/服务端数据。在不使用前端语言JS（jQuery等前端框架本质上也是JS）时，如果我们想往表单里面放入数据，该怎么办？比如从文件中、从数据库查出用户信息显示在表单中。

无非借助于后端语言如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="个人信息">
        <!-- form的id为main_form -->
        <form id="main_form" method="post">
            <div>
                <!-- 注意required:true是非常好用的一个data-options选项，保证该输入框不能为空 -->
                <input class="easyui-textbox" name="userName" data-options="label:'姓名',required:true">
            </div>
            <div>
                <input class="easyui-textbox" name="userEmail" data-options="label:'邮箱',required:true,validType:'email'">
            </div>
            <div>
                <!-- 此处使用easyui-combobox组件 -->
                <select class="easyui-combobox" name="userSex" label="性别">
                    <option value="0">男</option>
                    <option value="1">女</option>
                </select>
            </div>
        </form>
    </div>
    <div>
        <!-- 此处注意使用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');
        }

第二个，加载内存数据：

/*加载内存数据，直接指定控件name对应的值即可*/
        function loadMemory(){
            $('#main_form').form('load',
                {userName:'猫哥',userEmail:'maoge@maoge.com',userSex:'0'}
            );
        }

第三个，需要从文件中加载json格式的数据，首先在WebRoot下新建一个文件夹json，然后在json文件夹下新建user_data.json文件，代码如下，注意EasyUI能自动解析json，智能匹配表单，所以按照json的格式放好数据就OK了。

{
    "userName":"test",
    "userEmail":"maoge@maoge.com",
    "userSex":"1"
}

/*加载文件数据，直接写文件路径即可*/
        function loadFile(){
            $('#main_form').form('load', 'json/user_data.json');   
        }

最后是从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数据与前后端的交互，这就是标准（约定）的意义。

点击复制链接与好友分享!回本站首页