Easyui+springMVC传值

高校整体架构采用的是springMVC+hibernate+easyui+mysql;

这个项目前台框架使用的是easyui,初次使用这个框架还是觉得挺好上手的,有中文的官网而且还有很多已经做好的demo作为参照,基本上我们在项目开发中常用的控件在官网上都能够找到。除此之外还提供了帮助文档,可以在官网上面下载。帮助文档就具体的给出了每一种控件的方法,事件已经用法,还给出了一些简单的小例子,基本上都很简单。

EasyUI demo中文官网地址:http://www.jeasyui.net/demo/321.html

EasyUI帮助文档下载地址:http://download.csdn.net/detail/lypf19900912/8400833

所以对于easyui的学习,只要有一些基本的html和js基础,学习起来都不难。这次在项目中使用easyui觉得应该总结的是easyui和后台的传值,现在高校一期已经告一段落了,所以在这个间隙就把自己在开发过程中掌握的一些传值技巧总结一下。

1.    Easyui的控件中提供的传值方式

在easyui中一些控件提供了url属性,通过此属性可以直接的访问后台并且将后台传递的数据直接显示在绑定的控件上,很类似于在学习ASP.NET中学习到的数据绑定控件。

在项目的开发中使用的比较多的有表格和树形以及组合下拉框。表格和组合框示例代码如下

前台

<%@page import="com.tgb.itoo.assess.entity.CourseAssessResult"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI传值</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/themes/default/tableheight.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/demo/demo.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
	<div>
		组合框:<input class="easyui-combobox" id="testCombo" name="testCombo" style="width:100px">
	</div>

	<table id="dg" class="easyui-datagrid" title="详细信息" style="width: 100% x; height: 500px" charset="UTF-8"
			data-options="rownumbers:true,singleSelect:false" method="post">
		<thead>
				<tr >
					<th field="content" width="75%"  align="center" font-size="30px">内容</th>
					<th field="score" width="10%" align="center">分数</th>
				</tr>
		</thead>
	</table>
	<script type="text/javascript">
	    //下拉框中的数据-页面加载的时候会访问url并将查询的数据绑定到valueField和textField
		function comboboxData(){
			$('#institution').combobox({
					url:'queryData',  //设置访问的url参数,可以添加参数比如'queryData?id='+'123'
					method:'get', //提交方式
					valueField:'id', //下拉框选项的value
					textField:'name', //下拉框选项的name
					panelHeight:'auto',  //下拉框高度自适应
				});
		}
		//table表格中的url,在页面加载的时候会访问该url,并将查询到的数据绑定对应的字段上
		//要求
			//1. 查询出的数据是json串
			//2. json中数据的key与table表格中列的field相同
		$(document).ready(function(){
			//为 table添加url属性
			$('#dg').datagrid({
			    url:"queryById?id="+'124',
			});
            /************
			reload:重新执行url,condition是url中的参数
			$('#dg').datagrid("reload",{
					conditions: (value)
			});
			************/
		});
	</script>
	</body>
</html>

对于这些属性(url,method等)可以直接写在控件上,但是我自己更加习惯写在js中,不然就会变成页面上一个控件就会占很大的一部分,整体看页面就会显得很乱,其次在调试前台的代码的时候也不好定位,不好调试。(个人习惯,这些属性写在控件上面也是完全没问题的)

后台

使用springMVC,所以页面中写的url都是controller中的方法,在后台接受url参数的方式有两种

1. 使用request对象中获得

@RequestMapping(value="/queryData")
	public void queryData(HttpServletRequest request,HttpServletResponse response) throws Exception {
		request.getParameter("id");
		System.out.println(id);
	}

2. 在controller方法中添加url中的参数

	@RequestMapping(value="/queryData")
	public void queryData(String id,HttpServletRequest request,HttpServletResponse response) throws Exception {
		System.out.println(id);
	}

需要注意的两点:

1 easyui只能够解析json串,也就是说后台传递的数据如果想要绑定到easyui控件上,必须将数据转换为json串的形式。

2 传值不只是代码传递url,还有很重要的访问参数

2.    JQuery之Ajax传值

虽然我们使用了前台框架,如果想要实现一些异步调用就一定会使用到Ajax。其实就算不是异步调用也是可以Ajax。因为Ajax方式访问可以处理url中的内容。下面就整理了一下JQuery的Ajax传值中的参数以及一个小的使用示例。

参数介绍:

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。

type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和

delete也可以使用,但仅部分浏览器支持。

timeout: 要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设

置。

async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。

如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等

待请求完成才可以执行。

cache:要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false)。

设置为false将不会从浏览器缓存中加载请求信息。

data: 要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格

式。get请求中将附加在url后。防止这种自动转换,可以查看processData选项。对象必须为key/value格

式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同

值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

dataType: 要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime

信息返回responseXML或responseText,并作为回调函数参数传递。

可用的类型如下:

xml:返回XML文档,可用JQuery处理。

html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。

script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求

时(不在同一个域下),所有post请求都将转为get请求。

json:返回JSON数据。

jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个

“?”为正确的函数名,以执行回调函数。

text:返回纯文本字符串。

beforeSend:要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义

HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参

数。

function(XMLHttpRequest){

this;   //调用本次ajax请求时传递的options参数

}

complete:要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)。

参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。

function(XMLHttpRequest, textStatus){

this;    //调用本次ajax请求时传递的options参数

}

success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。

(1)由服务器返回,并根据dataType参数进行处理后的数据。

(2)描述状态的字符串。

function(data, textStatus){

//data可能是xmlDoc、jsonObj、html、text等等

this;  //调用本次ajax请求时传递的options参数

error:要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错

误信息、捕获的错误对象(可选)。

ajax事件函数如下:

function(XMLHttpRequest, textStatus, errorThrown){

//通常情况下textStatus和errorThrown只有其中一个包含信息

this;   //调用本次ajax请求时传递的options参数

}

比较常用的:url,type,data,dataType,success,error

 $.ajax({
<span style="white-space:pre">	</span> type: "POST",
	 url: 'queryCourseByTeacher?teacherId=' + teacherId,
	 cache: false,
	 dataType : "json",
	 success: function(data){
			$("#course").combobox("loadData",data);
		}
 });  

3.    JavaScript传值

在js代码中我们熟悉的一些访问url以及传递参数方式。

Js中只能够直接访问url,不能够对url中的内容进行处理,如果想要处理url中的内容可以使用JQuery的Ajax方法。

window.location.href=url;
时间: 2024-11-05 22:43:03

Easyui+springMVC传值的相关文章

EasyUI + SpringMVC 解决静态资源访问

我们的项目用的是EasyUI+SpringMVC+EJB+JPA,分享一下项目中遇到的一些问题及其解决方法.前台用的EasyUI,页面中引入了easyUI的js与css(引入路径正确),但是无论如何都显示不出来,如下图: EasyUI的样式没有,看控制台:警告,找不到 21:26:25,643 WARN [org.springframework.web.servlet.PageNotFound](http-localhost/127.0.0.1:8080-1) No mapping found

easyUI+springMVC的DataGrid-demo

DataGrid (一).搭建springMVC: 错误:无法访问HTML页面,HTTP Status 404- 原因:springMVC拦截了静态资源的访问 解决方案:方案①:(web.xml下)<servlet-mapping><servlet-name>jsp</servlet-name><url-pattern>*.html</url-pattern></servlet-mapping>  方案②:(springMVC.xml

Java +EasyUI+SpringMvc实现Excle导入导出(上)

前言 先介绍下项目的开发环境,采用java开发语言进行开发,前台UI使用的是EasyUI框架,接下来是SpringMvc与Ejb结合来开发,整个项目管理采用的是Maven管理,服务器用的是Jboss6.2.0企业版. 正文 配置 对于Excel上传文件我们首先要引入commons-fileupload.jar包,由于我们的项目采用Maven进行项目管理,所以对于jar包的引入是在pom.xml文件中添加的依赖,添加commons-fileupload.jar的坐标: <pre name="

Shiro+easyUI+SpringMVC实现登录认证

??最近在做一个小项目,其中认证这块使用shiro+SpringMVC+easyUI,因为easyUI在提交数据的时候使用的是ajax的异步提交,所以shiro在处理数据的时候需要重写FormAuthenticationFilter的相关方法,所以在此记录下实现的过程,以供大伙参考. ??本文只给出核心代码,完整代码可去本人github上查看 https://github.com/q279583842q/SRM.git ShiroLoginFilter ??因为shiro默认的处理验证的方式是验

easyui +springMVC+MyBatis datagrid分页

@Controller @RequestMapping("/department") public class DepartmentController { @Resource private DepartmentService departmentService; private OutPutTool OutPutTool = new OutPutTool(); @RequestMapping("selectAll") public String select(@

Java入门到精通——调错篇之EasyUI+SpringMVC Form表单提交到Contorller中文字出现乱码

一.错误现象. 界面Post提交到Contorller的时候在Contorller中出现乱码. 二.问题解决. 在Web.xml下加入以下代码就可以解决. <filter> <filter-name>characterEncodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <

Java +EasyUI+SpringMvc实现Excle导入导出(下)

前言 接上篇,在上篇文章我们介绍了要实现Excle导入做的一些配置和Excel导入的前端EasyUI代码的书写和后台controller的具体书写,这篇我们我们主要来学习Excle导出的实现和ExcelUtil类的编写. 正题 Excel导出就是根据前台条件将参数传到controller,根据参数去数据库中进行查询,查询出list集合,调用ExcelUtil工具类,将list集合转为成excle数据,输出到浏览器. 导出实现 首先我们先来看下前台代码,前台获取参数,将参数传到对于的control

springMVC传值helloWorld

1 package com.test 2 @Controller 3 @RequestMapping("/dept/") 4 public class HelloWorldController { 5 @RequestMapping("index.action") 6 public ModelAndView index(HttpServletRequest request, 7 HttpServletResponse response) { 8 ModelAndVi

SpringMVC传值(对象或字符串)给前台js

java对象到js对象 1.先使用Jackson把对象转换成json串 ObjectMapper objectMapper = new ObjectMapper(); String json = objectMapper.writeValueAsString(obj); //obj为要传的对象 2.在Controller中使用model.addAttribute("json", json);方法把json串传到前台 3.然后在前台做如下处理(这两个引号很重要) var jsonStr