thymeleaf实现ajax请求的两种方式

Posted 2023-04-24

参考技术A 注意，对应的Controller类不能使用 @RestController 注解。

具体参考：

https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#rendering-template-fragments

布局方式同fragment方式，webController方法中有改动：

具体参考：

https://stackoverflow.com/questions/20982683/spring-mvc-3-2-thymeleaf-ajax-fragments

tinytongtong / spring-thymeleaf

ASP.NET MVC 实现AJAX跨域请求的两种方法

1.     发送JSONP请求

客户端：

JQuery对发送JSONP请求有很好的支持，客户端通过. ajax() 函数发送请求，其中需要制定 dataType 为“jsonp”  jsonpCallback 为指定的回调函数名（如  “UpdateDiv”），也就是客户端需要定义一个UpdateDiv 函数，当请求成功后会自动调用该函数。

服务器：

ASP.NET MVC没有内置对 JSONP 请求的支持，不过使用 JsonResult 可以很方便的实现。我们只需要定义一个类（如 JsonpResult）继承自JsonResult，并重写 ExecuteResult()方法，在输出数据时，调用客户端定义的那个回调函数（这个函数必须是存在的，并且必须是全局和唯一的）。需要注意的是，在自定义的JsonpResult 里，需要设置 JsonRequestBehavior 为 AllowGet,否则会出错，因为 JSONP 请求必须是 Get 方式提交的。

 

代码：

          客户端：

 

<scripttype="text/javascript">

 

            functionUpdateDiv(result) {

                $("#div1").html(result.ID +result.Name);

            }

 

        $(function() {

            $(".btn").click(function () {          

                $.ajax({

                   type: "GET",

                   url:"http://localhost:50863/Home/Index2",    //跨域url

                   dataType: "jsonp",   //指定 jsonp 请求

                   jsonpCallback: "UpdateDiv" // 指定回调函数

                });

            })

        })

 

</script>

 

 

服务端：

 

   public class JSONPResult :JsonResult

    {

        public JSONPResult()

       {

          JsonRequestBehavior=JsonRequestBehavior.AllowGet;

       }

 

        public string Callback{get;set;}      

 

        ///<summary>

        ///对操作结果进行处理

        ///</summary>

        ///<paramname="context"></param>

        public override void  ExecuteResult(ControllerContext context)

        {

            var httpContext = context.HttpContext;

            var callBack = Callback;

 

            if(string.IsNullOrWhiteSpace(callBack))

                   callBack = httpContext.Request["callback"]; //获得客户端提交的回调函数名称

           

            // 返回客户端定义的回调函数

            httpContext.Response.Write(callBack +"(");

            httpContext.Response.Write(Data);          //Data 是服务器返回的数据        

             httpContext.Response.Write(");");            //将函数输出给客户端，由客户端执行

        }

 

}

          //操作器和其它操作没什么区别，只是返回值是JsopnpResult结果

         public ActionResult Index2()

        {

            var str = "{ID :‘123‘, Name : ‘asdsa‘ }";

            return new JSONPResult{Data = str };  //返回 jsonp 数据，输出回调函数

        }

 

 

2.    跨域资源共享

相比 JSONP 请求，跨域资源共享要简单许多，也是实现跨域 AJAX 请求的首选。

客户端：

    客户端不在发送 JSONP 类型的请求，只需要发送普通的 JSON 请求即可，也不用定义回调函数，用 .success 即可。

服务端：

     服务端也很简单，操作结果还是返回普通的操作结果就可以，唯一要指定的是 HTTP 报文头部的Access-Control-Allow-Origi

指定为 “*” 即可，表示该输出允许跨域实现。

       跨域资源共享可以很方便的实现，不过在 IE9 还没有对该技术的支持，FireFox 就已经支持了。

 

代码：

客户端：

<scripttype="text/javascript">

        $(function() {

            $(".btn").click(function (){

                $.ajax({

                    type:"GET",

                    url:"http://localhost:50863/Home/Index3", //跨域URL

                    dataType:"json", 

                    success:function (result){

                        $("#div1").html(result.ID +result.Name);

                    },

                    error:function (XMLHttpRequest, textStatus,errorThrown) {                       

                        alert(errorThrown); // 调用本次AJAX请求时传递的options参数

                    }

                });

            })

        })

    </script>

 

服务端：

 

        ///<summary>

        ///跨站资源共享实现跨站AJAX请求

        ///</summary>

        ///<returns></returns>

        public ActionResult Index3()

        {

            var str = new { ID="123", Name= "asdsa" };

            HttpContext.Response.AppendHeader("Access-Control-Allow-Origin","*");

            return Json(str, JsonRequestBehavior.AllowGet);

        }