jquery+ajax实现动态加载表单

场景：
springMVC+jquery+ajax+jsp实现在页面中输入数字后，点击按钮，表单中自动加载指定行数据。

1、user实体类

package com.springmvc.entity;

/**
 * user实体类
 */
public class MyUser {

    // 实体类的属性和表的字段名称一一对应
    private int id;
    private String username;
    private int password;

    public MyUser() {
    }

    public MyUser(int id ,String username, int password) {
        this.id =id;
        this.username = username;
        this.password = password;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public int getPassword() {
        return password;
    }

    public void setPassword(int password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "MyUser{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password=" + password +
                '}';
    }
}

2、创建controller组件类。
toDymyuser（）方法用于跳转到jsp页面
getMyUserClass（）方法用于jsp页面的数据加载来源

package com.springmvc.controller;

import com.springmvc.entity.MyUser;
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;

/**
 * Created by Suncy on 2018/4/1 0001.
 */
@Controller
public class DyMyuserController {

    @RequestMapping(value="/dyuser")
    public String toDymyuser(){
        return "dyuserList";
    }

    @RequestMapping(value = "/userdata")
    @ResponseBody
    public List getMyUserClass(int count){
        List userlist = new ArrayList();
        for(int i=1;i<=count;i++){
            userlist.add(new MyUser(i,"sc"+i,i));
        }
        return userlist;
    }
}

3、新增jsp页面
1）、获取当前服务路径bathpath
2）、引入jquery包，这里直接使用的是http://cdn.static.runoob.com下的jquery包，在浏览器中输入该地址可访问，即为可用
3）、引入style样式，让页面简洁美观
4）、在script中，使用ajax时，需要传入参数便于动态显示表格，所以需要与controller层交互，这里使用post的方式，并在url中引入controller中设置的地址，数据传输成功后，动态追加到htmltxt中，最后使用jquery选择器将htmltxt传到元素的html即可。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String bathpath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort();
%>


    
    
    
    
    



点击

    
    
    

    

        
编号
        
用户名
        
密码
    
    
    

    

4、使用springMVC必须要配置web.xml文件

  mySpringMVC
  
  
    spring-mvc  
    org.springframework.web.servlet.DispatcherServlet 
    
         contextConfigLocation
          /WEB-INF/spring-mvc-servlet.xml
       
    1 
  

  
  
    spring-mvc     
    /
  

5、web.xml中使用到了/spring-mvc-servlet.xml，所以要在web-inf目录下新增该文件

6、启动tomcat，在浏览器中输入：http://localhost:8080/dyuser。效果如下

image.png