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');
		}

第二个,加载内存数据:

/*加载内存数据,直接指定控件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数据与前后端的交互,这就是标准(约定)的意义


如有问题请扫码联系我
在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页