Ajax:有关于ajax传值到后台controller,实现json的ajax传值
在我们做项目,写代码的过程中,无非就是增删改查,我们今天先来看看增加数据到数据库,和改动数据库的数据,用什么来实现好呢?当然用ajax的json传值,现在是最流行,也是最便捷的,下面让我小L带你们去看看。
1.说到ajax的传值,那我们必须得看看后台的controller
我这边后台是一个springboot的架构
我这边为大家写了一个简单的案例,希望对大家有所帮助。
先是一个我跳转到页面的一个方法
@RequestMapping(
"/cx1")
public ModelAndView cx1() { ModelAndView mv=
new ModelAndView(); mv.setViewName(
"/cx1");
return mv; }
2.输入此方法地址,我们可以顺利的进到这个页面
只是一个简单的页面案例哈
3.其实呢这个页面里面就包含ajax的传值,下面代码
<!DOCTYPE
html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
title
>Title
</
title
>
</
head
>
<
script
type=
"text/javascript"
src=
"../jquery-3.3.1.js"
></
script
>
<
body
>
<
form
> 姓名:
<
input
id=
"username"
type=
"text"
name=
"username"
><
br
/> 密码:
<
input
id=
"password"
type=
"password"
name=
"password"
><
br
/> 提交:
<
input
id=
"sub"
type=
"button"
name=
"button"
>
<
label
id=
"msg"
></
label
>
</
form
>
<
script
type=
"text/javascript"
>
$(
function () {
$(
"#sub").
click(
function () {
$.
ajax({
type:
'post',
url:
'/user/school',
data: {
username:
$(
"#username").
val(),
password:
$(
"#password").
val()},
dataType:
'json',
success:
function (data) {
$(
'#msg').
empty();
var
html=
'';
$(
'#msg').
html(
html) } }); }); });
</
script
>
</
body
>
</
html
>
你看我通过ajax就行ajax传值就是这么简,前提你要注意的是
1.你的url一定要正确
2.看看是否是json格式
3.我这边用的是jQuery的ajax传值
4.看看后台是否属性,ajax的data的属性是否和实体类的属性一致
我这边输入了admin,admin
我们看看后台的日志打印
2018-06-29 09:50:50.931 [http-nio-8085-exec-10] INFO com.oneinlet.interceptor.LoggerHandlerInterceptor - 当前访问的url :/user/school
2018-06-29 09:50:50.931 [http-nio-8085-exec-10] INFO com.oneinlet.interceptor.LoggerHandlerInterceptor - 调用的类名:com.oneinlet.controller.UsersController, 调用方法名:school
2018-06-29 09:50:50.931 [http-nio-8085-exec-10] INFO com.oneinlet.interceptor.LoggerHandlerInterceptor -
---> 请求参数列表:key:username value:[admin]
---> 请求参数列表:key:password value:[admin]
2018-06-29 09:50:50.931 [http-nio-8085-exec-10] INFO com.oneinlet.interceptor.LoggerHandlerInterceptor - 调用的类名:com.oneinlet.controller.UsersController, 调用方法名:school
2018-06-29 09:50:50.931 [http-nio-8085-exec-10] INFO com.oneinlet.interceptor.LoggerHandlerInterceptor -
---> 请求参数列表:key:username value:[admin]
---> 请求参数列表:key:password value:[admin]
5.username:admin password:admin 说明成功进入后台的controller
@RequestMapping(value=
"/school",method = RequestMethod.
POST)
public Object school(
@RequestParam(
"username") String username,
@RequestParam(
"password") String password){ User user=
new User(); user=
userService.getOne(
7); user.setUsername(username); user.setPassword(password);
userService.save(user);
// ModelAndView mv=new ModelAndView();
// mv.setViewName("/school");
return setOKResult(); }
6.进入后台controller,执行成功了,那我们来看看数据库的值的变化
数据库更新了 admin admin
好今天ajax传递json值已经教给大家了
关注微博:李日兴LRX