使用SpringMVC框架的异步请求实现

1.所需jar包如下图

在这里插入图片描述
总结起来,可以这样记。

  • Spring包五个:core,context,beans,expression,aop
  • SpringMVC包两个:web,webmvc
  • jackson包三个:annnotations,core,databind
  • 日志包两个:log4j,commons-logging

2.配置文件

spingmvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">
    <!--异步请求用的-->
    <mvc:annotation-driven>
        <mvc:message-converters>
            <bean class="org.springframework.http.converter.StringHttpMessageConverter"/>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"/>
        </mvc:message-converters>
    </mvc:annotation-driven>
	<!--注解扫描器-->
    <context:component-scan base-package="com.hjj"/>
    <!--注解映射器-->
    <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping"/>
    <!--注解适配器-->
    <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter"/>
    <!--视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="suffix" value=".jsp"/>
    </bean>
</beans>

3.简单jsp页面

<%--
  Created by IntelliJ IDEA.
  User: Admin
  Date: 2019/8/29
  Time: 9:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnGet").click(function () {
                var stuId = $("#stuId").val();
                $.ajax({
                    url:"stu/getStudentById.action",
                    type:"post",
                    data:{"stuId":stuId},
                    dataType:"json",
                    success:function (data) {
                        console.log("success");
                        var result = "姓名"+data.stuName+"性别"+data.stuGender+"年龄"+data.stuAge;
                        $("#showinfo").html(result);
                    },
                    errro:function (data) {
                        console.log("error data" + data);
                    }
                });
            });

            $("#btnList").click(function () {
                var stuName = $("#stuName").val();
                var stuGender = $("#stuGender").val();
                var perfixAge = $("#perfixAge").val();
                var suffixAge = $("#suffixAge").val();
                $.ajax({
                    url:"stu/listStudent.action",
                    type:"post",
                    data:{"stuName":stuName,"stuGender":stuGender,"maxAge":perfixAge,"minAge":suffixAge},
                    dataType:"json",
                    success:function (data) {
                        console.log("success");
                        for(var i=0;i<data.length;i++){
                            var newRow = "<tr><td>"+data[i].stuId
                                +"</td><td>"+data[i].stuName
                                +"</td><td>"+data[i].stuGender
                                +"</td><td>"+data[i].stuAge
                                +"</td><td>"+data[i].flag+"</td></tr>";
                            $("#stuListTable").append(newRow);
                        }
                    },
                    errro:function (data) {
                        console.log("error data" + data);
                    }
                });
            });
        });
    </script>
</head>
<body>
学生编号:<input type="text" id="stuId" name="stuId"><br>
<button type="button" id="btnGet">查询</button>
<div id="showinfo"></div><br>
    学员姓名:<input type="text" id="stuName" name="stuName"/>&nbsp;&nbsp;
    学员性别:<input type="text" id="stuGender" name="stuGender"/>&nbsp;&nbsp;
    最大年龄:<input type="text" id="perfixAge" name="perfixAge"/>&nbsp;&nbsp;
    最小年龄:<input type="text" id="suffixAge" name="suffixAge"/>&nbsp;&nbsp;
    <input type="button" id="btnList" value="查询"/><br>
    <table id="stuListTable" border="1" width="800px">
        <tr>
            <td>学员编号</td>
            <td>学员姓名</td>
            <td>学员性别</td>
            <td>学员年龄</td>
            <td>学员Flag</td>
        </tr>
    </table>
</body>
</html>

4.控制器

package com.hjj.controller;

import com.hjj.domain.Student;
import com.hjj.domain.StudentParam;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.List;

@Controller
@RequestMapping("stu/")
public class StudentController {
    @RequestMapping("getStudentById.action")
    public @ResponseBody Student getStudentById(Integer stuId){
        System.out.println("in StudentController method getStudentById");
        System.out.println("stuId=========="+stuId);
        Student stu = new Student();
        stu.setStuName("Tom");
        stu.setStuGender("男");
        stu.setStuAge(20);
        return stu;
    }
    @RequestMapping("listStudent.action")
    @ResponseBody
    public List<Student> listStudent(StudentParam param){
        List<Student> list = new ArrayList<>();
        System.out.println(param);
        Student stu1 = new Student(1,"lily","男",20);
        Student stu2 = new Student(2,"john","男",20);
        Student stu3 = new Student(3,"mack","男",20);
        Student stu4 = new Student(4,"cook","男",20);
        list.add(stu1);
        list.add(stu2);
        list.add(stu3);
        list.add(stu4);
        return list;
    }
}

简单说明,客户端请求的查询是虚假的,只有动作,只是实现了前后台的异步请求

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值