springMVC与ajax交互个人小结
一、web项目
跳转到页面：
1、不传参
-----后台controller
@RequestMapping(value = {"/model/getPage"}, method = { RequestMethod.GET ,RequestMethod.POST})
public String getPage() throws Exception{
return "***/page";//指向page.jsp或page.html页面
}
2、传参-----@ModelAttribute将参数封装到实体
-----后台controller
//解决乱码
@ModelAttribute
public void setEcode(HttpServletRequest request,HttpServletResponse response){
try {
request.setCharacterEncoding("utf-8");
response.setContentType("utf-8");
} catch (UnsupportedEncodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
@RequestMapping(value = "/getPage" , method = {RequestMethod.GET , RequestMethod.POST })
public String getClientPage(ModelMap model, @ModelAttribute Page<Bean> page,Bean bean) throws Exception{
********//省略实现方法
model.addAttribute("page", page);//向前台传分页信息
model.addAttribute("bean", bean);//传回查询参数
return "***/page";
}
--页面
<form class="search-wrapper" id="search" method="post" action="getPage?${_csrf.parameterName}=${_csrf.token}">
<table class="table6">
<tr>
<td>用户名</td>
<td><input name="name" id="name" type="text" maxlength="10" /></td>
</tr>
<tr>
<td>密码</td>
<td><input name="pwd" id="pwd" type="text" maxlength="10" /></td>
</tr>
</table>
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" /><div class="btn-wrapper">
<a class="icon-search" id="" title="确定" href="javascript:query()">确定</a>
<a class="icon-search" id="" title="重置" href="javascript:reset()">重置</a>
</div>
</form>
返回某种类型的数据给前台：
3、传参-----@ResponseBody将参数封装到实体，返回某种类型的数据给前台
-----后台controller
@RequestMapping(value = "/selectByKey" , method = {RequestMethod.GET , RequestMethod.POST })
@ResponseBody
public ClientDO selectByKey(HttpServletResponse response,Bean bean) throws Exception{
try {
return ***Consumer.selectByKey(bean);
} catch (Exception e) {
return null;
}
}
--页面
$.ajax({
url:"selectClientByKey",
data : {'id':id},
type : "get",
success : function(data) {// ajax返回的数据
$("#id").val(data.id);
$("#name").val(data.name);
}
});
4、增改删：
-----后台controller
@RequestMapping(value = "/insertBean" , method = {RequestMethod.GET , RequestMethod.POST })
public void insertBean(HttpServletResponse response,ClientSearchDTO bean) throws Exception{
response.setContentType("utf-8");
PrintWriter out = null;
try {
out = response.getWriter();
int res = ***Consumer.insertBean(bean);
if(res > 0 ){
out.print(SUCCESS);
}else{
out.print(AGAIN);
}
out.flush();
} catch (ScnException e) {
e.printStackTrace();
out.print(ERROR);
out.flush();
}
}
--页面
function insert() {
var res = checkData('insert');//校验参数
if(res != '000000'){
return false;
}
$.ajax({
url:"insertBean",
data:{
name:$("#insert_name").val(),
pwd:$("#insert_pwd").val(),
},
dataType:"text",
success:function(r){
console.info(r);
if(r == 'success'){
SimplePop.alert("添加成功");
var searchParams = getSearchParams("search");
var url = "getPage?"+_csrfName+"="+_csrfValue;
goBackList(url,searchParams,"POST");//返回分页页面
}else{
SimplePop.alert("****");
}
},
error:function(r){
SimplePop.alert("添加失败", "");
}
})；
}
<form class="search-wrapper" id="insert" method="post" action="insertBean">
<table class="table6">
<tr>
<td>用户名</td>
<td><input name="name" id="insert_name" type="text" maxlength="10" /></td>
</tr>
<tr>
<td>密码</td>
<td><input name="pwd" id="insert_pwd" type="text" maxlength="10" /></td>
</tr>
</table>
<div>
<a class="icon-search" id="" title="确定" href="javascript:insert()">确定</a>
<a class="icon-search" id="" title="重置" href="javascript:reset()">重置</a>
</div>
</form>
---删除
-----后台controller
@RequestMapping(value = "/deleteBean" , method = {RequestMethod.GET , RequestMethod.POST })
public void deleteBean(HttpServletResponse response,Bean bean) throws Exception{
response.setContentType("utf-8");
PrintWriter out = null;
try {
out = response.getWriter();
if(***Consumer.deleteBean(bean) > 0){
out.print(SUCCESS);
}else{
out.print(ERROR);
}
out.flush();
} catch (Exception e) {
e.printStackTrace();
out.print(ERROR);
out.flush();
}
}
--中间处理参数
int result = 0;
String[] codes = bean.getCodes().split(",");
Map<String, Object> reqMap = new HashMap<>();
for(String code : codes){
reqMap.put("code",code);
result += ***Dao.deleteByPrimaryKey(reqMap);
}
--页面
function delete() {
var codesArry = getCheckBoxs('checkbox');
if (codesArry.length == 0) {
SimplePop.alert('未选择要批处理的信息！');
return false;
}
SimplePop.confirm("确认删除？", {
type: "error",
confirm:function(){
var codes = '';
var count = 0;
$("#beans input[type='checkbox']").each(function(i,e){
var checked = $(this).prop("checked");
if(checked){
codes += $(this).val()+",";
count++;
}
});
if(clientcodes == ''){
SimplePop.alert('未选择要批处理的信息！');
return false;
}
$.ajax({
url : "deleteBean",
data : {'codes':codes},//后台Bean中属性List<> codes;
type : "get",
error : function(msg) { // 若Ajax处理失败后返回的信息
SimplePop.alert('删除失败。。。');
},
success : function(data) {// ajax返回的数据
var searchParams = getSearchParams("search");
var url = "getPage?"+_csrfName+"="+_csrfValue;
goBackList(url,searchParams,"POST");
}
});
}
});
}
模糊查询
-----后台controller----使用ModelMap返回
/**
* 名称模糊查询
*/
@RequestMapping("/***/queryByName")
@ResponseBody
public ModelMap queryByName(@RequestParam("keyword") String keyword) throws Exception {
ModelMap model = new ModelMap();
String param= URLDecoder.decode(URLDecoder.decode(keyword, "utf-8"), "utf-8");
Bean bean=new Bean();
bean.setName(param);
try {
List<Bean> list = ***Consumer.queryByName(bean);
model.put("list",list);
}catch (ScnException e) {
model.addAttribute("exception",e);
}
return model;
}
--页面
/*生成承运商名称帮助查询列表*/
function nameQuery(domId,domName) {
var test = $("#"+domName).bigAutocomplete({
width: 'auto',
id: [''+domId, 'name', ''+domName],
highlight: true,
ajax: {
url:"queryByName",
type: "GET",
success: function(data) {
var result = eval(data.list);
var datas = [];
for(var i = 0; i < result.length; i++) {
datas[i] = [];
datas[i].push(result[i].name);
datas[i].push(result[i].pwd);
}
driverjson=datas;
test.setData(datas, true); // 设置显示的内容，并更新
test.setTitle(['用户名','密码']); // 设置标题
},
error: function(msg) {
alert("查询异常")
}
}, callback : function(data){//选中后赋值
$("#name").val(data[0]);
$("#pwd").val(data[1]);
}
});
}
二、Rest项目
-----后台控制层
/**
* 获取客户分页信息
*/
@GET
@Path("/selectList")
@Produces("application/json")
@Override
public JsonResult selectList(
@QueryParam("length") int length,
@QueryParam("pageNum") int pageNum,
@QueryParam("name") String name,
@QueryParam("pwd") String pwd,
@QueryParam("searchValue") String searchValue,//单独查询条输入信息
@HeaderParam("sessionId") String sessionId//本域内会话id
) {
JsonResult result = JsonResult.createFalied("数据为空");
Map<String,Object> bean = new HashedMap();
Page<Bean> page = new Page<>();//此Page为用户指定在页面输出的page，不是一般的page
Page<Bean> returnpage = new Page<>();
try {
page.setPageSize(length); // 每页记录数
page.setPageNo(pageNum); //当前页
SystemUserInfoT u = CacheUtils.get(SystemUserInfoT.class, sessionId);
if (u == null || u.getAccount() == null) {
result=JsonResult.createSuccess();
result.setMsg("用户信息为空");
result.setReturnCode(-1);
result.addData("");
return result;
}
if(StringUtils.isNoneBlank(name)){
bean.put("name",name);
}
if(StringUtils.isNoneBlank(pwd)){
bean.put("pwd",pwd);
}
returnpage = ***Consumer.selectPage(page, bean);
result = JsonResult.createSuccess("**管理");
result.addData(returnpage);
} catch (Exception e) {
log.error("e", e);
result.addData(returnpage);
result = JsonResult.createFalied("e:" + e.toString());
}
return result;
}
--页面
ajax: function (data, callback, settings) {
//ajax配置为function,手动调用异步查询
$.ajax({
type: "GET",
url: '***/selectList',
data: {},
dataType: "json",
success: function (result) {
layer.msg("接口调用成功");
var finalData = result.data[0];
//封装返回数据
var returnData = {};
returnData.draw = data.draw;//自行返回draw参数,最好由后台返回
returnData.recordsTotal = finalData.totalCount;
returnData.recordsFiltered = finalData.pageSize;
returnData.data = finalData.results;
//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
callback(returnData);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
layer.msg("查询失败");
}
});
}
-----增删改
-----1.增/改
@POST
@Path("/update")
@Produces("application/json;charset=utf-8;")
@Consumes("application/json;charset=utf-8;")
@Override
public JsonResult update(Bean bean, @HeaderParam("sessionId") String sessionId) {
JsonResult result = JsonResult.createFalied("数据为空");
SystemUserInfoT u = CacheUtils.get(SystemUserInfoT.class, sessionId);
if (u == null || u.getAccount() == null) {
result=JsonResult.createSuccess();
result.setMsg("用户信息为空");
result.setReturnCode(-1);
result.addData("");
return result;
}
try {
result = ***Consumer.update(bean);
}catch (Exception e){
result=JsonResult.createFalied("处理失败!");
result.setReturnCode(-1);
result.addData("");
log.info(e.getMessage());
}
return result;
}
--页面
//编辑保存
function toSaveFun(layerIndex,table) {
var d = {};
var t = $('#gc-editDlg').find("form").serializeArray();
$.each(t, function () {
d[this.name] = this.value;
});
$.ajax({
type: "POST",
contentType:"application/json; charset=utf-8",
url: '***/update',
data:JSON.stringify(d),
dataType: "json",
success: function (result) {
if(result.returnCode==1){
layer.alert("保存成功！");
layer.close(layerIndex);
table.reload();
}else{
layer.alert(result.msg);
layer.close(layerIndex);
}
},
error: function (result) {
layer.alert("处理失败！");
}
});
}
-----2.删
@DELETE
@Path("/remove")
@Produces("application/json;charset=utf-8;")
@Override
public JsonResult remove(@FormParam("code") String code, @HeaderParam("sessionId") String sessionId
) {
SystemUserInfoT u = CacheUtils.get(SystemUserInfoT.class, sessionId);
JsonResult result=JsonResult.createSuccess();
if (u == null || u.getAccount() == null) {
result.setMsg("用户信息为空");
result.setReturnCode(-1);
result.addData("");
return result;
}
int flag= 0;
try {
Bean bean= new Bean();
bean.setCode(code);
flag=***Consumer.remove(bean);
}catch (Exception e){
log.info(e.getMessage());
result.setMsg("处理失败！");
result.setReturnCode(-1);
result.addData("");
return result;
}
result.addData("");
if(flag>0){
result.setMsg("处理成功!");
result.setReturnCode(1);
}else{
result.setMsg("处理失败!");
result.setReturnCode(0);
}
return result;
}
--页面
//删除一行
function deleteOneFun(row,table) {
layer.confirm("确定删除该条记录吗?", {
btn: ['确定', '取消']//按钮
}, function () { // 点击确定的时候
$.ajax({
type: "DELETE",
dataType: "json",
data: {"code":row.code},
url: '***/remove',
success: function (result) {
if(result.returnCode==1){
layer.msg("处理成功！");
table.reload(); //表格刷新
}else{
layer.msg(result.msg);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
});
}
浙公网安备 33010602011771号