EasyUI–表单加载内存/本地/服务端数据-阿里云开发者社区

开发者社区> 熊猫大哥大> 正文

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="个人信息" 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包自行搜索)。如图:

image.png

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数据与前后端的交互,这就是标准(约定)的意义。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
easyUI中datagrid控制获取指定行数的数据
直接上代码: var rows=$('#detail').datagrid('getRows');//获取所有当前加载的数据行 var row=rows[0];// 行数从 0 开始   项目中代码: var rows = $('#detail').
1191 0
【1026 - 1030直播导视 | PPT 下载】阿里专家直播:EasyTransfer平台应用实践、大数据+AI meetup 2020第二季·上海场来啦!
本周为大家带来了8场技术公开课,技术学习实践两不误!开源日迎来第六期啦线上对话阿里云专家:为大家带来EasyTransfer平台应用实践;大数据+AI meetup上海专场来啦!大家快办好小板凳坐等下周技术专场吧!
2973 0
jQuery EasyUI API 中文文档 - 数据表格(DataGrid)
DataGrid 数据表格 扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults 。 依赖 panel resizable linkbutton pagination 用法 1.
1069 0
easyui 删除数据表格
1 最直接的方法: 返回的数据格式               Object rows:Array[3] 0:Object 1:Object 2:Object length:3 __proto__:Array[0] total:3 return {total:0...
703 0
Android与服务器端数据交互
  上一节中我们通过http协议,采用HttpClient向服务器端action请求数据。当然调用服务器端方法获取数据并不止这一种。WebService也可以为我们提供所需数据,那么什么是webService呢?,它是一种基于SAOP协议的远程调用标准,通过webservice可以将不同操作系统平台,不同语言,不同技术整合到一起。
1076 0
从远程Oracle服务器上同步复制数据到本地备份库
create or replace PROCEDURE "SYNC_DATA_FROM_DBLINK_DB" AS BEGIN DECLARE CURSOR c_TabNames IS SELECT TNAME FROM TAB; v_TabName c_TabNames%ROWTYPE; v_SQL VARCHAR2(500); v_rowcount NUMB
1524 0
【spring bean】spring中bean的懒加载和depends-on属性设置
项目结构如下:   ResourceBean.java代码: 1 package com.it.res; 2 3 import java.io.File; 4 import java.
814 0
Android与服务器端数据交互(http协议整合struts2+android)
android中有时候我们不需要用到本机的SQLite数据库提供数据,更多的时候是从网络上获取数据,那么Android怎么从服务器端获取数据呢?有很多种,归纳起来有 一:基于Http协议获取数据方法。
642 0
【测试验证】数据库加载到内存占用大小
介绍     数据库大小加载到内存占用是不是数据库的本身大小哪?今天忽然突发奇想于是就测试一下。首先我要说明的是我是在EF框架下进行测试的,不知道会不会与ado.net连接方式差生不同的结果,我仅仅是做记录,若有不足还请海涵。
812 0
+关注
熊猫大哥大
努力努力再努力
587
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载