Maven多模块项目搭建+SSM框架整合（四、Ajax异步获取数据，jq动态添加）-原创手记-慕课网

最近有点小忙，但是还是在晚上抽出来点时间更新文章，希望对初学者有帮助（都是从那时候过来的，哈哈）一起努力。

开始正题~~~~

封装类ResultVo

在与前台页面交互的过程中我们一般会用到一个封装类，来传递数据，我在这里写了一个，见图（通过本文你就会知道它的用处了）。
图片描述

package com.songci.mytest_one.model.utils;

/**
 * Created by songl on 2017/8/10.
 */
public class ResultVo<T> {
    private boolean success = false;
    private String message = null;
    private T result = null;

    public void isSuccess(boolean b) {
        this.success=b;
    }
    public void setMessage(String message) {
        this.message = message;
    }
    public void setResult(T result) {
        this.result = result;
    }
    public boolean getSuccess(){
        return success;
    }
    public String getMessage() {
        return message;
    }
    public T getResult() {
        return result;
    }

}

修改StudentService接口（返回结果用上ResultVo）

图片描述

StudentService

package com.songci.mytest_one.service;

import com.songci.mytest_one.model.Student;
import com.songci.mytest_one.model.utils.ResultVo;

import java.util.List;

/**
 * Created by songl on 2017/8/8.
 */
public interface StudentService {
    /**
     * 添加学生
     * @param student
     * @return
     */
    Boolean addStudent(Student student);

    /**
     * 根据ID删除学生
     * @param id
     * @return
     */
    Boolean deleteStudentById(Integer id);

    /**
     * 根据ID修改学生信息
     * @param student
     * @return
     */
    Boolean updateStudentById(Student student);

    /**
     * 按条件查找所有学生
     * @param student
     * @return
     */
//修改之处
    ResultVo findAllStudent(Student student);

}

StudentServiceImpl

package com.songci.mytest_one.service.impl;

import com.songci.mytest_one.dao.StudentDao;
import com.songci.mytest_one.model.Student;
import com.songci.mytest_one.model.utils.ResultVo;
import com.songci.mytest_one.service.StudentService;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;

/**
 * Created by songl on 2017/8/8.
 */
@Service("StudentService")
public class StudentServiceImpl implements StudentService{
    @Resource
    private StudentDao studentDao;

    public Boolean addStudent(Student student) {
        return studentDao.insert(student);
    }

    public Boolean deleteStudentById(Integer id) {
        Student student=new Student();
        student.setId(id);
        return studentDao.delete(student);
    }

    public Boolean updateStudentById(Student student) {
        return studentDao.update(student);
    }
//修改之处start
    public ResultVo findAllStudent(Student student) {
        ResultVo resultVo=new ResultVo();
        List<Student> list= studentDao.select(student);
        if (list.size()>0){
            resultVo.setResult(list);
            resultVo.isSuccess(true);
        }else {resultVo.setMessage("没有找到相关信息");}
        return resultVo;
    }
//修改之处end
}

完成StudentController

图片描述

package com.songci.mytest_one.controller;

import com.songci.mytest_one.model.Student;
import com.songci.mytest_one.model.utils.ResultVo;
import com.songci.mytest_one.service.StudentService;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.annotation.Resource;

/**
 * Created by songl on 2017/8/10.
 */
@Controller
@RequestMapping("/studentApi/")
public class StudentController {
    @Resource
    private StudentService studentService;
    @RequestMapping("findAllStudentInfo")
    public @ResponseBody  //添加@ResponseBody直接返回json数据
    ResultVo findAllStudentInfo (@RequestParam("id") String id){
        Student student=new Student();
        //在此我就不做过多验证判断
        if ("0".equals(id)){student=null;}
        else {student.setId(new Integer(id));}
        return studentService.findAllStudent(student);
    }
}

web.xml引用配置文件

图片描述

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1">
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:config/applicationContext.xml</param-value>
  </context-param>
  <context-param>
    <param-name>log4jConfigLocation</param-name>
    <param-value>classpath:config/log4j.properties</param-value>
  </context-param>
  <context-param>
    <param-name>log4jRefreshInterval</param-name>
    <param-value>6000</param-value>
  </context-param>
  <filter>
    <filter-name>SpringEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
    <init-param>
      <param-name>forceEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>SpringEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
  <listener>
    <listener-class>org.springframework.web.util.Log4jConfigListener</listener-class>
  </listener>
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  <servlet>
    <servlet-name>spring</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>
        classpath:config/spring-mvc.xml
      </param-value>
    </init-param>
    <load-on-startup>2</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>spring</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>
</web-app>

直接就在欢迎页index.jsp添加代码（悄悄告诉你，里面用到了Ajax与jquery，满满知识点）

jquery.js已上传GitHub
图片描述

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>开发中......</title>
    <script type="text/javascript" src="./assets/js/jquery-1.7.2.js"></script>
</head>
<body>
<h2>Hello World!</h2>
<div>
    <h2>用异步请求获取学生信息</h2><br>
    请输入学生学号，如果是0则查询所有学生信息
    <input id="studentid"type="text"><button onclick="findStudentInfo()">点我查询</button>
    <div id="showMessageDiv"></div>
</div>
<script type="application/javascript">
    function findStudentInfo() {
        var studentid=$("#studentid").val();
//        alert("获取到的studentid：" + studentid);
        $.ajax({
            type:"POST",
            url:"/studentApi/findAllStudentInfo.do",
            data:{id:studentid},
            dataType:"json",
            success : function (data) {
                if(data.success){
                    $("#showMessageDiv").empty();
                    $("#showMessageDiv").append("<table id='table1'></table>");
                    $("#table1").append("<tr><td>学生ID</td><td>姓名</td><td>性别</td><td>地址</td></tr>");
                    $.each(data.result,function (i,result) {
                        var sex="女"
                        if (result.sex){sex="男"}
                        var item="<tr><td>"+result.id+"</td><td>"+result.name+"</td><td>"+sex+"</td><td>"+result.address+"</td>";
                        $("#table1").append(item);
                    });
                }else {
                    $("#showMessageDiv").empty();
                    $("#showMessageDiv").append(data.message);
                }
            }
        });
    }
</script>
</body>
</html>