springmvc数据绑定笔记、ajax与后台数据交互笔记

最新推荐文章于 2020-08-22 09:09:37 发布

渴望飞的鱼

最新推荐文章于 2020-08-22 09:09:37 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/qq_36411874/article/details/65627997

版权

javaWeb 同时被 3 个专栏收录

158 篇文章 4 订阅

订阅专栏

springmvc

9 篇文章 0 订阅

订阅专栏

ajax

4 篇文章 0 订阅

订阅专栏

springmvc数据绑定笔记

1.单个参数绑定：@RequestParam(“参数”)

@ResponseBody

@RequestMapping("/selectOneUseByEmail")

//2.传邮箱：单个查找用户

//项目发布后，访问地址：http://localhost:8888/项目名称/selectOneUseByEmail? userEmail =你要查找的邮箱

public UserselectOneUseByEmail(@RequestParam("userEmail") String userEmail){

System.out.println("邮箱是:"+userEmail);

Useruser=userService.selectOneUseByEmail(userEmail);

System.out.println(user);

return user;//单个用户的信息

}

2.对象数据绑定 @ModelAttribute("对象")

@ResponseBody

@RequestMapping("/addUser")

//项目发布后，访问地址：http://localhost:8888/项目名称/addUser? user.name=小明&user.age=16

public boolean addUser(@ModelAttribute("user") User user) {

boolean flag=userService.addUser(user);

return flag;

}

3.List对象数据绑定

原代码如下，这时候需要做出修改，才能正确传参。

@ResponseBody

@RequestMapping("/deleteAllUsers")

//9.删除所有用户

publicboolean deleteAllUsers(List<User> userlist) {

boolean flag=userService.deleteAllUsers(usersList.getUsersList());

return flag;

}

修改：

（1）首先，创建一个绑定数据的类，用来绑定list

package com.hmy.ssh.controller.UserForm;

import java.util.List;

import com.hmy.ssh.bean.User;

public classUserListForm {

private List<User> usersList;

public List<User>getUsersList() {

return usersList;

}

public voidsetUsersList(List<User> usersList) {

this.usersList = usersList;

}

@Override

public String toString() {//记得重写方法

return "UserListForm [usersList=" + usersList+ "]";

}

（2）可以controller层中的参数

//项目发布后，访问地址：http://localhost:8888/项目名称//deleteAllUsers? user[0].name=小明&user[0].age=16

后会删除

@ResponseBody

@RequestMapping("/deleteAllUsers")

//9.删除所有用户

// publicboolean deleteAllUsers(List<User> userlist) {

public boolean deleteAllUsers(UserListForm usersList) {

boolean flag=userService.deleteAllUsers(usersList.getUsersList());

return flag;

}

4.两个参数绑定时候：（一个是list,一个是参数）

@ResponseBody

@RequestMapping("/updateChooseUsers")

//http://localhost:8888/项目名称///updateChooseUsers?usersList[0].userName=qq&authority=0

// public boolean updateUsers(List<User> user,int authority){

public boolean updateUsers(UserListFormusersList,@RequestParam("authority")intauthority) //http://localhost:8888/MyCourseOnlineProject///updateChooseUsers?usersList[0].userName=admin&authority=0

//传用户列表：更改指定指定用户列表信息 //成功！

boolean flag=userService.updateUsers(usersList.getUsersList(),authority);

return flag;

}

5.前端在jsp中，首先要导入json的包，导入jQuery

然后在页面中这样写可以用阿贾克斯ajax来获取后台传的json数据，这样就好方便啦！

<%@ page language="java"import="java.util.*" pageEncoding="utf-8"%>

String path =request.getContextPath();

String basePath =request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN">

<html>

<head>

<title>My JSP 'index.jsp' starting page</title>

<!--

<linkrel="stylesheet" type="text/css"href="styles.css">

-->

$(function(){

$('#toLogin').click(function() {

alert("点击了一次");

//验证用户名密码

var truename = $('#truename').val();

varuserPwd = $('#userPwd').val();

alert("您的用户名字："+truename);

$.ajax({

type: "POST",

url: "<%=basePath %>/selectOneUseByTrueName",

data: {

truename: truename,

userPwd: userPwd

dataType: "text",

success: function(data) {

console.log(data);

//alert("您的用户名字："+data);

error: function(jqXHR) {

alert('failte');

console.log("发生错误：" +jqXHR.status);

}

});

functiongetQuetionAgain(event) {

// 获取题目

$.ajax({

type: "get",

url: "data/exercise.json",

data: {

// 题目类型为1

test: 2,

length:6

dataType: "text",

success: function(data) {

var data = JSON.parse(data);

var question1 = data.question1;

// 将选择题渲染到页面

var tag = '';

for (var i = 0; i <question1.length; i++) {

var question = question1[i];

var Bt = '<divclass="change"><div class="changeradio"><inputtype="radio" name="que' + i + '" value="A" >A、'+ question.A + '</div><div class="changeradio"><inputtype="radio" name="que' + i + '" value="B" >B、'+ question.B + '</div><div class="changeradio"><inputtype="radio" name="que' + i + '" value="C" >C、'+ question.C + '</div><div class="changeradio"><inputtype="radio" name="que' + i + '" value="D" >D、'+ question.D + '</div></div>';

// 做到倒数第二条的时候，再次加载题目

if (i >= (question1.length -2)) {

Bt = '<divclass="change getQuetion"><divclass="changeradio"><input type="radio"name="que' + i + '" value="A" >A、'+ question.A + '</div><div class="changeradio"><inputtype="radio" name="que' + i + '" value="B" >B、'+ question.B + '</div><div class="changeradio"><inputtype="radio" name="que' + i + '" value="C" >C、'+ question.C + '</div><div class="changeradio"><inputtype="radio" name="que' + i + '" value="D" >D、'+ question.D + '</div></div>';

}

tag += '<divclass="question"><div class="questionTitle"><span>'+ (flog + 1) + '、</span><p>'+ question.title + '<spanclass="glyphicon"></span></p></div>' + Bt +'</div>';

answer.push(question.answer);

flog++;

}

$('.getQuetion').removeClass('getQuetion');

$('#question1Box').html($('#question1Box').html()+tag);

$("input").change(showAnswer);

$('.getQuetion').click(getQuetionAgain);

error: function(jqXHR) {

alert('题目获取失败！请与管理员联系！');

}

});

}