AJAX在框架中的应用详解

创建交互式、快速动态网页应用的网页开发技术在框架中的应用

1.$.ajax()方法

$.ajax()方法是一个功能十分强悍的一个底层方法，基于该方法实现的$.get()和$.岗位()都是常用的向服务器请求数据的方法。

1.1 $.ajax()中的参数及使用方法

$.ajax()调用的语法格式为：

$.Ajax([选项])

其中，可选参数[选项]作为$.ajax()方法中的请求设置，其格式为键/值，既包含发送请求的参数，也含有服务器响应回调的数据，常用的参数具体格式如下：

1.2 $.ajax()方法的使用实例

实例中使用的是一个简单的基于嘘框架的服务应用开发详解项目

这里我们通过一个控制器来接受一个实体类类型的数据，然后返回一个地图类型的数据，实现页面的请求。

@ Controller @请求映射("/user ")公共类用户控制器{ @资源私有IUserService用户服务；@ResponseBody @RequestMapping(值='/login '，方法=RequestMethod .开机自检)公共映射字符串，对象登录(用户实体用户){映射字符串，对象映射=new HashMapString，Object()；系统。出去。println(用户。ToString())；//判断数据库中是否存在这样一个实体类数据布尔loginResult=用户服务。isexist(用户);map.put('loginResult '，loginResult)；返回地图；}}前端代码：

“% @”页面语言=“Java”导入=“Java”。乌提尔。*“页面编码=”UTF-8“% %字符串路径=请求。getcontextpath()；字符串基本路径=请求。getscheme()' ://'请求。getservername()“:”请求。getserverport()“path ”/；%!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML头基href=' %=基路径% ' rel='外部无跟随'标题用户登录/title meta http-equiv=' pragma '内容=' no-cache ' meta http-equiv=' cache-control '内容=' no-cache ' meta http-equiv=' expires '内容=' 0 ' meta http-equiv=' keywords '内容=' keywords 1，keywords 2，keywords 3 ' meta http-equiv=' description ' 内容='这是我的页面链接rel='样式表type=' text/CSS ' href=' %=基本路径% CSS/bootstrap . -从这里输入一个UserName-input name=' UserName ' type=' text ' class=' form-control '占位符=' UserName ' aria-descripted by=' name _ span '/div div class=' input-group ' span class=' input-group-addon ' id=' password _ span ' password/span！-从这里输入一个PassWord-input name=' PassPort ' type=' PassPort ' class=' form-control ' placeholder=' PassPort ' aria-descripted by=' PassPort _ span '/div！-提交表单-输入类型=' submit ' id=' logintn ' class=' BTN BTN-默认值'=' log in '/div/body脚本类型=' text/JAVAScript ' src=' http :%=BasePath % js/jquery-2。1 .4 .js /脚本类型=' text/JAVAScript ' src=' http :%=BasePath % js/log in。js /脚本/html为了方面讲解，我们将创建交互式、快速动态网页应用的网页开发技术代码单独放到了一个射流研究…文件中

$(function(){ $(' # logintn '))。单击(function(){ console . log(' log in '))；var username=$(' input[name=username]')。val()；var password=$(' input[name=password]')。val()；var user={ ' username ' : username，' password ' : password }；$.ajax({ type : 'post '，dataType : 'json '，data : user，content type : ' application/x-www-form-URL encoded；Charset=utf-8 '，url:' user/login '，async3360 false，success3360函数(数据){if (false==data。loginresult) {alert('错误的用户名或密码，请重新登录！');} else if(true==data . loginresult){ alert('登录成功！');var index URL=window . location . protocol '//' window . location . host window . location . pathname ' html/index . html '；window.location=indexUrl} }，错误： function() {alert('服务器出现故障，请尝试重新登录！');} });});});在上面的js代码中，数据部分构造了一个用户对象，当通过post方法传递给服务器时，服务器会解析成UserEntity类型的用户对象(神奇的是，具体原理我暂时还不太懂，希望有聪明的人可以在微博下留言，所以请大家多多指教)。当contentType设置为“application/x-www-form-URL encoded”时；当charset=UTF-8 '时，会提交一个from表单，而不是我们经常使用的json对象，但是服务器会返回一个json对象。然后我们解析成功后函数中返回的数据(一个布尔数据)，并根据结构进行简单的跳转。

2.请求服务器数据的其他方法

两个亿。get()方法和$。post()方法基于$。方法从服务器请求数据。与美元相比。ajax()方法，使用起来更简单，需要设置的参数也更少，但是我们仍然使用$。ajax()方法更常见，因为它更可定制，更灵活，更易于使用。

2.1 $.get()方法

$.获取([选项])

这个方法在导入选项时只需要设置url、日期、成功等选项。例如

$.get ('/user/login '，{ name : encodeuri($(' # username ')。val ()}，函数(数据){ 0.省略逻辑代码})由于get方法，在向服务器发送请求时使用K/V格式。如果参数包含汉字，则需要使用encodeuri()。

2.2 $.post()方法

$.帖子([选项])

的使用。post()方法与的方法基本相同。get()方法。例子如下：

$.post ('/user/login '，{ name : encodeuri($(' # username ')。val ()}，函数(数据){ 0.省略逻辑代码})也是参数包含汉字时的转码操作。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。如果你想了解更多，请查看下面的相关链接