mvc ajax get请求,springMVC实现 简单的ajax请求

controller1

2

3

4

5

6

7

8

9

10

11

EmployeeService employeeService;

/**

* 处理员工crud请求

*/

@RequestMapping("/emps")

public String (@RequestParam(value="pn",defaultValue = "1")Integer pn){

//引入PageHelper 分页插件

List emps = employeeService.getAll();

return "list";

}

Service1

2

3

4

5

6

7

8

9

10

11

12

//业务逻辑组件

@Service

public class EmployeeService{

EmployeeMapper employeeMapper; //调用DAO层的Mapper

//查询所有员工 这 不是一个分页查询

public List getAll(){

return employeeMapper.selectByExampleWithDept(null);

}

}

DAO

采用 xml 的方式实现增删改查

分页查询

1. 在 MyBatis 配置 xml 中配置拦截器插件

在 controller 中使用 pageHelper

1

2

3

4

5

6

7

8

9

10

11

12

13

14

public String (@RequestParam(value="pn",defaultValue = "1")Integer pn,

Model model){ //Request传递的参数 为初始页码

//设置每页的大小和起始页面

PageHelper.startPage(pn,5);

//紧接着的查询就是分页查询

List emps = employeeService.getAll();

//使用pageInfo 包装查询后的结果 ， 之主要将pageInfo交给页面

PageInfo page = new PageInfo(emps,5);//传入连续显示的页数

//PageInfo分装了详细的信息，包括查询出来的信息

//交给页面的详细信息

model.addAttribute("pageInfo",page);

return "list";

}

请求资源资源

因为在 web.xml 中控制需要处理映射的方法

1

2

3

4

5

6

7

8

9

10

dispatcherServlet

org.springframework.web.servlet.DispatcherServlet

1

dispatcherServlet

/

这里将所有的请求都拦截 交给 mvc 的 xml 处理

当请求时 rest 风格时 会启用 controller 进行处理

但是对其他的请求 比如对静态 js 的请求会交给 tomcat 处理

1

2

3

4

相对路径1

pageContext.setAttribute("APP_PATH", request.getContextPath());

APP_PATH 表示相对路径 当前的 webapp 路径

Ajax1

2

3

4

5

jQuery.ajax(url,[settings])

url:一个用来包含发送请求的URL字符串。

settings:AJAX 请求设置。所有选项都是可选的

。

$.ajax 函数返回他创建的 XMLHttpRequest 对象。通常 jQuery 只在内部处理并创建这个对象

1

2

3

4

5

6

7

8

9

10

$(function(){

$.ajax({

url:"${APP_PATH}/emps",

data:"pn=1",

type="GET",

success:function(result){

console.log(result);

}

});

});

data Object,String

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 “&foo=bar1&foo=bar2”。

typeString

(默认: “GET”) 请求方式 (“POST” 或 “GET”)， 默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

回调函数

如果要处理 $.ajax() 得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

beforeSend 在发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数。

error 在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象(如果有的话)

dataFilter 在请求成功之后调用。传入返回的数据以及” dataType” 参数的值。并且必须返回新的数据(可能是处理过的)传递给 success 回调函数。

success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。

complete 当请求完成之后调用这个函数，无论成功或失败。传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

$.ajax({

url:"${pageContext.request.contextPath}/user/login",

async:false,

type:"post",

data:{'userName':userName,'password':password},

dataType:"json",

success:function(data){

flag = data.checkResult;

if(flag==true){

location.href="/user/homepage";

}else{

location.href="/user/toLogin"

}

}

});

ssm 17

1

2

3

$.each(emps,function(index,item){ //对list对象emps进行遍历

alert(item.empName); //item时每个员工对象

});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

function build_emp_table(result){

var emps = result.extend.pageInfo.list; //获得employee 的list对象

$.each(emps,function(index,item){ //对list对象进行遍历

// alert(item.empName);

var empIdTd = $("

").append(item.empId);

var empNameTd = $("

").append(item.empName);

var empGenderTd = $("

").append(item.empGender=='M'?"男":"女");

var empEmailTd = $("

").append(item.empEmail);

var deptNameTd = $("

").append(item.department.deptName);

$("

").append(empIdTd)

.append(empNameTd)

.append(empGenderTd)

.append(empEmailTd)

.append(deptNameTd)

.appendTo("#emps_table tbody");

console.log(item.empId + item.empName);

});

}

在 Js 中添加在源 JSP 中的代码