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();
%>


    
    Title
    
    
    



编号 用户名 密码

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。效果如下

jquery+ajax实现动态加载表单_第1张图片
image.png

你可能感兴趣的:(jquery+ajax实现动态加载表单)