如何在Thymeleaf中实现ajax请求url的可靠构造?
2017-08-09 21:14
465 查看
作为一个应用型码蚁,对jstl、freemaker、thymeleaf等等众多深感无奈……
建立springboot应用时,模板中有一项是thymeleaf,springboot现在也是推荐使用这个,然而并没有时间仔细研究它……
现在的问题是,ajax请求时,如何可靠的构造url?
先说本文的结论,在xxx.html文件中,加入以下的类似代码,即能够可靠的实现:
其他问题:
1、本文说的“可靠”,主要是指无论你是测试还是生产,或者修改根路径等,均不影响ajax请求的正确性;
2、当前找到的技术文主要是强调在html文件中使用ajax进行请求,但实操时,我们多半是在外部的js文件中进行ajax请求,此时,折中的方案就是在相关的js文件中,引用上面在html文件中定义的basePath变量,来构造完整的url;
另外一种仅是为了实现模块化的方案是,将需要thymeleaf解析的变量定义放在一个单独的fragment类型的html文件中,如以下:
// 以下是fragscript.html中的内容
// 假设fragscript.html与index.html文件在一个目录下(index.html详细见本文结尾的demo里)
<script th:fragment="outerJs01" xmlns:th="http://www.springframework.org/schema/mvc" type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var basePath02 = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/;
/*]]>*/
</script>
然后,在index.html文件的</body>之后,使用如下代码引用上面的fragment:
3、本文其实是基于作者的另外一篇文章:http://blog.csdn.net/smartcore/article/details/52121676,感觉原先在eclipse里创建jsp页面时,自动生成的basePath真心有用啊,不知道为什么现在用的越来越少了,也有可能是我不会用当前新产品的缘故吧
一些相关的链接(作者并没有参考其中):
springMVC+thymeleaf怎么做ajax提交:http://bbs.csdn.net/topics/391957407
Thymeleaf for a URL in Javascript code? https://stackoverflow.com/questions/40670352/thymeleaf-for-a-url-in-javascript-code
How to Use Thymeleaf for a URL in Javascript code? http://forum.thymeleaf.org/Make-Ajax-Call-using-Thymeleaf-Spring-WebFlow-Jquery-WITHOUT-using-the-now-deprecated-spring-js-dojos-td4028308.html
附一个简单的demo(CSDN竟然默认至少要收1个积分):
http://download.csdn.net/download/smartcore/9926870
建立springboot应用时,模板中有一项是thymeleaf,springboot现在也是推荐使用这个,然而并没有时间仔细研究它……
现在的问题是,ajax请求时,如何可靠的构造url?
先说本文的结论,在xxx.html文件中,加入以下的类似代码,即能够可靠的实现:
<script type="text/javascript" th:inline="javascript"> /*<![CDATA[*/ var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/; $(document).ready(function () { $.ajax({ type: 'post', dataType: 'text', url: basePath + '/index/ajaxtest', data: {}, cache: false, async: true, success: function (data) { var data = eval('(' + data + ')'); $('#idUser').text(data.name); $('#idMsg').text(data.msg); } }); }); /*]]>*/ </script>
其他问题:
1、本文说的“可靠”,主要是指无论你是测试还是生产,或者修改根路径等,均不影响ajax请求的正确性;
2、当前找到的技术文主要是强调在html文件中使用ajax进行请求,但实操时,我们多半是在外部的js文件中进行ajax请求,此时,折中的方案就是在相关的js文件中,引用上面在html文件中定义的basePath变量,来构造完整的url;
另外一种仅是为了实现模块化的方案是,将需要thymeleaf解析的变量定义放在一个单独的fragment类型的html文件中,如以下:
// 以下是fragscript.html中的内容
// 假设fragscript.html与index.html文件在一个目录下(index.html详细见本文结尾的demo里)
<script th:fragment="outerJs01" xmlns:th="http://www.springframework.org/schema/mvc" type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var basePath02 = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/;
/*]]>*/
</script>
然后,在index.html文件的</body>之后,使用如下代码引用上面的fragment:
<script th:replace="fragscript :: outerJs01"></script>
3、本文其实是基于作者的另外一篇文章:http://blog.csdn.net/smartcore/article/details/52121676,感觉原先在eclipse里创建jsp页面时,自动生成的basePath真心有用啊,不知道为什么现在用的越来越少了,也有可能是我不会用当前新产品的缘故吧
一些相关的链接(作者并没有参考其中):
springMVC+thymeleaf怎么做ajax提交:http://bbs.csdn.net/topics/391957407
Thymeleaf for a URL in Javascript code? https://stackoverflow.com/questions/40670352/thymeleaf-for-a-url-in-javascript-code
How to Use Thymeleaf for a URL in Javascript code? http://forum.thymeleaf.org/Make-Ajax-Call-using-Thymeleaf-Spring-WebFlow-Jquery-WITHOUT-using-the-now-deprecated-spring-js-dojos-td4028308.html
附一个简单的demo(CSDN竟然默认至少要收1个积分):
http://download.csdn.net/download/smartcore/9926870
相关文章推荐
- 如何在Thymeleaf中实现ajax请求url的可靠构造?[续]
- 如何实现ajax延时发送在空闲之后去发送ajax请求
- Java如何实现URL带请求参数(get/post)及得到get和post请求url和参数列表的方法
- .net 3.5 HttpRequest 请求的url 网址 如何实现不转义
- 如何实现ajax延时发送在空闲之后去发送ajax请求
- java如何实现URL带参数请求(get/post)
- [jquery]AJAX 重定向的困境,如何重定向 URL 或如何设置重定向请求的属性
- 构造HTTP请求包,实现后台URL连接。
- Ajax详解及其案例分析之如何获得Ajax对象,使用Ajax对象发送GET和POST请求,校验用户名,POST和GET请求时的乱码处理,实现级联的下拉列表
- Ajax请求如何实现页面无刷新前进后退,将ajax请求保存至浏览器历史记录
- ajax跨域post请求,如何实现呢
- 为什么返回的数据前面有callback? ashx/json.ashx?的后面加 callback=? 起什么作用 js url?callback=xxx xxx的介绍 ajax 跨域请求时url参数添加callback=?会实现跨域问题
- $.ajax结合node如何实现跨域请求
- AJAX中POST与GET二种方式区别及如何实现
- ajax碰到请求url过长的问题! ajax中get和post的区别
- 用Dojo实现Ajax请求:XHR、跨域、及其他
- linux中用telnet如何构造get、post请求头报文
- 下面给出一个$.ajax()方法实现异步请求的例子
- Ajax如何通过url找到servlet路径?