thymeleaf中用ajax

thymeleaf模版引擎

写项目用到了thymeleaf模版引擎，然后前后端交互用model存数据，然后controller跳转，通过model将数据带过去，利用thymeleaf遍历，这种的话，如果出现错误的情况，前台不好显示提醒。

然后就想着要统一返回格式，这样前端可以根据状态码判断，从而做出提示。（完整代码在下面）

然后就想着用ajax请求，这样可以通过返回数据判断。

本来是想将ajax返回数据传入thymeleaf中遍历的那块，th：each这里，但是这样好像不行。所以只能是传统的方式。遍历拼接html，然后写入。

function todo() {$.ajax({type: "post",contentType: "application/json",url: "/testCoursePage",data: "",//不需要传入数据就没传// beforeSend: function () {//     loadingIndex = layer.msg('处理中', {icon: 16});//},success: function (result) {//layer.close(loadingIndex);console.log(result);if (result.status) {//window.location.href = "main";//alert(result.data);userList=result.data;var inf="<tr>\n" +"                            <th style=\"display: none\">id</th>\n" +"                            <th style=\"display: none\">课程id</th>\n" +"                            <th>课程名称</th>\n" +"                            <th>代课老师</th>\n" +"                            <th>上课时间</th>\n" +"                            <th>剩余人数</th>\n" +"                            <th>操作</th>\n" +"                        </tr>";for (var i=0;i<userList.length;i++){var course=userList[i];inf+= "<tr> <td style=\"display: none\" >"+course.id+"</td> <td style=\"display: none\">"+course.courseid+"</td>"+"<td>"+course.coursename+"</td> <td >"+course.teachername+"</td> <td>"+course.description+"</td> <td >"+course.number+"</td>"+"<td><a type=\"button\" class=\"layui-btn layui-btn-sm\" >确认选课</a></td></tr>";}$("#table2").html(inf);//写入table中} else {alert("获取错误！")}}});}

参数:

注意Content-Type：
1. 使用Ajax默认格式来传递数据【推荐】
Ajax的默认格式为：application/x-www-form-urlencoded，相当于(username=“admin”&password=123)来传递数据（这是GET请求的固定格式）

前端代码：
当Ajax以默认格式上传时，data数据直接使用JSON对象user，不用转换为JSON字符串（很方便）

此时写data : user,

var user= {"username" : username,"password" : password,"rememberMe":rememberMe};$.ajax({url : "http://...../jsontest.do",type : "POST",async : true,data : user,dataType : 'json',success : function(data) {}});

后端使用@RequestParam注解或省略注解都可以接收到传来的数据：
【推荐】

//直接省略注解
@RequestMapping("/jsontest.do")public void test(User user,String username,String password,Boolean rememberMe){System.out.println(user);System.out.println("username: " + username);System.out.println("password: " + password);System.out.println("rememberMe: " + rememberMe);}

优点：
1).前端传递数据不用转换为json字符串：JSON.stringify(user)
2).后端接受的参数很灵活，即可以封装为User对象，亦可以使用单个参数username,rememberMe，甚至User对象和单个rememberMe参数混合使用都可以

2. 使用application/json格式来传递数据
Content-Type使用application/json的时候，要将JSON对象转换为JSON字符串
前端代码：
这里 data : JSON.stringify(user),

var user= {"username" : username,"password" : password};$.ajax({url : "http://...../jsontest.do",type : "POST",async : true,contentType: "application/json; charset=utf-8",data : JSON.stringify(user),dataType : 'json',success : function(data) {}});

后端必须使用 @RequestBody 注解：

//这种方式下所有的参数都只能封装在User对象中，不能单独设置参数@RequestMapping("/jsontest")public void test(@RequestBody User user ){String username = user.getUsername();String password = user.getPassword();}//或者
@RequestMapping("/jsontest")public void test(@RequestBody Map map ){String username = map.get("username").toString();String password = map.get("password").toString();}//或者
public void test(@RequestBody String jsonData) {JSONObject jsonObject = JSON.parseObject(jsonData);String username= jsonObject.getString("username");String username= jsonObject.getString("password");}

缺点：
1.前端需要使用JSON.stringify()将JSON对象转换为JSON字符串
2.后端在接受参数的时候比较麻烦，没有第1种简单，也没有第一种灵活

统一返回格式完整代码：

package com.jf.common;import com.fasterxml.jackson.annotation.JsonIgnore;
import com.fasterxml.jackson.databind.annotation.JsonSerialize;import java.io.Serializable;@JsonSerialize(include = JsonSerialize.Inclusion.NON_NULL)
//保证序列化值为null时候，key不序列化
public class ServerResponse<T> implements Serializable {private int status;private String msg;private T data;private ServerResponse(int status) {this.status = status;}private ServerResponse(int status, T data) {this.status = status;this.data = data;}private ServerResponse(int status, String msg) {this.status = status;this.msg = msg;}private ServerResponse(int status, String msg, T data) {this.status = status;this.msg = msg;this.data = data;}@JsonIgnore//忽略public boolean isSuccess(){return this.status==ResponseCode.SUCCESS.getStatus();}public int getStatus() {return status;}public String getMsg() {return msg;}public T getData() {return data;}public static  <T>ServerResponse<T> createBySuccess(){return new ServerResponse<T>(ResponseCode.SUCCESS.getStatus());}public static  <T>ServerResponse<T> createBySuccessMessage(String msg){return new ServerResponse<T>(ResponseCode.SUCCESS.getStatus(),msg);}public static  <T>ServerResponse<T> createBySuccess(T data){return new ServerResponse<T>(ResponseCode.SUCCESS.getStatus(),data);}public static  <T>ServerResponse<T> createBySuccess(String msg,T data){return new ServerResponse<T>(ResponseCode.SUCCESS.getStatus(),msg,data);}public static  <T>ServerResponse<T> createByError(){return new ServerResponse<T>(ResponseCode.ERROR.getStatus(),ResponseCode.ERROR.getMsg());}public static  <T>ServerResponse<T> createByErrorMessage(String errorMsg){return new ServerResponse<T>(ResponseCode.ERROR.getStatus(),errorMsg);}public static  <T>ServerResponse<T> createByErrorMessage(int errorStatus,String errorMsg){return new ServerResponse<T>(errorStatus,errorMsg);}}

package com.jf.common;public enum ResponseCode {SUCCESS(1,"SUCCESS"),ERROR(0,"ERROR"),NEED_LOGIN(10,"NEED_LOGIN"),ILLEGAL_ARGUMENT(2,"ILLEGAL_ARGUMENT");private final int status;private final String msg;ResponseCode(int status, String msg) {this.status = status;this.msg = msg;}public int getStatus() {return status;}public String getMsg() {return msg;}
}

jsp注意jquery路径，防止项目发布后找不到jquery。

thymeleaf中用ajax相关推荐

SpringBoot不使用Thymeleaf的ajax成功后html跳转
一.SpringBoot不使用Thymeleaf的ajax成功后html跳转如图所示,ajax请求成功之后,这样子跳转页面是失败的二.解决办法在该目录下新建static文件夹,把html放在这里
jQuery中用ajax访问php接口文件
js代码 function ajax_request(){var result;var articleId = new Object();articleId=getArticleId();$.ajax ...
SpringBoot中使用thymeleaf时ajax请求不能回显消息
场景在SpringBoot项目中使用thymeleaf模板时,在js文件中使用ajax提交表单不能成功回显消息. 实现修改为 html中: <button id="parseBt ...
解决在thinkphp5.0中用ajax访问后台控制器方法时，返回的数据显示不出来
错误代码如下: $.post("{:url('changeStatus')}",{"id":$(this).attr("id")},func ...
bootstrap validator ajax提交,bootstrapValidator中用ajax校验
xlh : { validators : { trigger : 'change', notEmpty : { message : '序列号不能为空' }, threshold : 15,// 有2字 ...
ie中用ajax提示未定义,Jquery在IE7下无法使用 $.ajax解决方法
通过查看源码发现 // Create the request object; Microsoft failed to properly // implement the XMLHttpRequest ...
android表单错误提示,安卓微信中用$.ajax提交表单一直返回error
在其他手机浏览器和iphone的微信中都没问题,只有在安卓的微信中会返回error,XMLHttpRequest.status 为 200, XMLHttpRequest.readyState 为 4 ...
PHP+mysql+ajax搭建图书管理系统
经过这次开发还是有了很深的感悟,虽然这是一个很小的前后端结合的项目,但毕竟是自己亲手将它"生下"嘛,还是很珍惜它,而且也的确让我稍有成长. 历时:两个星期技术:mysql+php ...
Thinkphp ajax分页
Thinkphp中用ajax分页和普通的ajax分页的区别在于处理位置的不同,thinkphp是在控制器的方法中处理ajax传的值,然后返回数据.下面是一个点击事件触发后,显示的内容用ajax分页. ...

thymeleaf中用ajax

thymeleaf中用ajax相关推荐

最新文章

热门文章