java ajax_JavaWeb实现ajax请求实例

效果：在前端页面的text框输入一个id，点击按钮，发送ajax请求到数据库查询对应用户数据返回，将用户信息显示在页面，实现局部刷新。

1.前端的jsp页面 (代码的注释写的非常详细了，直接看代码就行了，我就不再解释了)

测试ajax

$(document).ready(function () {

});

function method() {

var val = $("#userId").val();

$.ajax({

type:"GET",

url:"getUser",

// data:{"id":val}, // data参数是可选的，有多种写法，也可以直接在url参数拼接参数上去，例如这样：url:"getUser?id="+val,

data:"id="+val,

async:true, // 异步，默认开启，也就是$.ajax后面的代码是不是跟$.ajx里面的代码一起执行

cache:true, // 表示浏览器是否缓存被请求页面,默认是 true

dataType:"json", // 返回浏览器的数据类型，指定是json格式，前端这里才可以解析json数据

success:function(data){

$("#name").text(data.name);

$("#age").text(data.age);

},

error:function(){

console.log("发生错误")

alert("发生错误");

},

complete:function(){

console.log("ajax请求完事，最终操作在这里完成")

}

});

// alert("测试异步")

}

获取

名字：

年龄

2.controller的代码// 访问jsp页面

@RequestMapping("/testAjax")

public String testAjax(){

return "TestAjax";

}

// jsp页面的请求url

@RequestMapping("/getUser")

@ResponseBody

public String getUser(String id) throws InterruptedException {

User user = userService.get(id);

User user1 = new User();

String s = JSON.toJSONString(user1); // 就算数据库查不到也不会返回Null

if(user!=null){

s = JSON.toJSONString(user);

}

// Thread.sleep(5000); // 测试异步就放开它

return s;

}

这里 getUser 方法里面用到了阿里的 fastjson的json解析工具(用来对象转json字符串的)，放个maven依赖

com.alibaba

fastjson

1.2.47

3.UserServicepackage com.liqiye.springbootdemo.service;

import com.liqiye.springbootdemo.entity.User;

import com.liqiye.springbootdemo.mapper.UserMapper;

import org.springframework.beans.factory.annotation.Autowired;

import java.util.List;

/**

* @author liqiye

* @description

* @date 2019/4/6

*/

@Service

public class UserService {

@Autowired

private UserMapper userMapper;

public User get(String id){

return userMapper.get(id);

}

}

4.UserMapperpackage com.liqiye.springbootdemo.mapper;

import com.liqiye.springbootdemo.entity.User;

import org.apache.ibatis.annotations.Mapper;

import org.apache.ibatis.annotations.Param;

import org.apache.ibatis.annotations.Select;

// @Mapper

public interface UserMapper {

@Select("select * from user where id = #{id}")

User get(@Param("id")String id);

}

5.Userpackage com.liqiye.springbootdemo.entity;

import com.liqiye.springbootdemo.utils.SetName;

/**

* @author liqiye

* @description

* @date 2019/4/6

*/

public class User {

public Integer id;

@SetName(value = "张三")

public String name;

public Integer age;

public Integer getId() {

return id;

}

public void setId(Integer id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public Integer getAge() {

return age;

}

public void setAge(Integer age) {

this.age = age;

}

public User() {

}

public User(String name, Integer age) {

this.name = name;

this.age = age;

}

@Override

public String toString() {

return "User{" +

"id=" + id +

", name='" + name + '\'' +

", age=" + age +

'}';

}

}

6.数据库DROP TABLE IF EXISTS `user`;

CREATE TABLE `user` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(255) DEFAULT NULL,

`age` int(11) DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;

INSERT INTO `user` VALUES ('1', '张三', '23');

INSERT INTO `user` VALUES ('2', '李四', '24');

INSERT INTO `user` VALUES ('3', '王五', '25');