jquery+ajax实现动态加载表单

作者: 乘风破浪的姐姐 | 来源:发表于2018-04-01 18:42 被阅读24次

jquery+ajax实现动态加载表单
JavaScript动态加载js和css
动态表单实现
Angular 动态增减表单项
Android 仿IOS的PopupWindow和通用BaseP
ng-alain表单使用方式
JavaScript 动态创建 Form 表单
android 热修复之类加载机制
layui
Flutter 动态表单实现

场景：
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<MyUser> getMyUserClass(int count){
        List<MyUser> userlist = new ArrayList<MyUser>();
        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();
%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <style>
        * { padding: 0; margin: 0; }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }
        tbody tr {
            background-color: #f0f0f0;
        }
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <script type="text/javascript">
        function getdata(mycount) {
            $.ajax({
                cache:false,
                async:false,
                type:"post",
                dataType:"json",
                data:{count:mycount},
                url:"<%=bathpath%>/userdata",
                success:function (data) {
                    var htmlTxt="";
                    for(var i=0;i<data.length;i++){
                        htmlTxt+="<tr>";
                        htmlTxt+="<td>"+data[i].id+"</td>";
                        htmlTxt+="<td>"+data[i].username+"</td>";
                        htmlTxt+="<td>"+data[i].password+"</td>";
                        htmlTxt+="</tr>";
                    }
                    $("#J_TbData").html(htmlTxt);
                }
            });
        }

        $(document).ready(function(){
            $("#btn").click(function(){
                var count = $("#count").val();
//               alert(count);
                getdata(count);
            });
        });
    </script>
</head>
<body>

<table>
    <input id="count"/>
    <button id="btn" >点击</button>
    <thead>
    <tr>
        <th>编号</th>
        <th>用户名</th>
        <th>密码</th>
    </tr>
    </thead>
    <tbody id="J_TbData">
    </tbody>
</table>
</body>
</html>

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

<web-app xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
     http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         version="3.0">
  <display-name>mySpringMVC</display-name>
  <!-- 前端控制器 -->
  <servlet>
    <servlet-name>spring-mvc</servlet-name>  <!-- 名称，真实的文件名需要在这个名字后面加上-servlet后缀 -->
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!-- 固定写法 -->
    <!-- 这里可以设置前端控制器的路径，如果这一步注释掉，则默认前端控制器的路径为：/WEB-INF/[servlet-name]-servlet.xml-->
        <init-param> <param-name>contextConfigLocation</param-name>
          <param-value>/WEB-INF/spring-mvc-servlet.xml</param-value>
       </init-param>
    <load-on-startup>1</load-on-startup> <!-- load-on-startup元素标记容器是否在启动的时候就加载这个servlet(实例化并调用其init()方法)。 -->
  </servlet>

  <!-- 拦截所有请求 -->
  <servlet-mapping>
    <servlet-name>spring-mvc</servlet-name>     <!-- 这里的名字要和上面的servlet-name统一 -->
    <url-pattern>/</url-pattern>
  </servlet-mapping>
</web-app>

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

<?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:p="http://www.springframework.org/schema/p" 
    xmlns:context="http://www.springframework.org/schema/context" 
    xmlns:mvc="http://www.springframework.org/schema/mvc" 
    xmlns:task="http://www.springframework.org/schema/task"
    xsi:schemaLocation="
        http://www.springframework.org/schema/beans 
        http://www.springframework.org/schema/beans/spring-beans-4.2.xsd 
        http://www.springframework.org/schema/context 
        http://www.springframework.org/schema/context/spring-context-4.2.xsd 
        http://www.springframework.org/schema/mvc 
        http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd 
        http://www.springframework.org/schema/task 
        http://www.springframework.org/schema/task/spring-task-4.2.xsd">
    <!-- 扫描路径 -->
    <context:component-scan base-package="com.springmvc.controller" >
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>
    <!-- 配置根视图 -->
    <mvc:view-controller path="/" view-name="index"/>
    <!-- 激活基于注解的配置 @RequestMapping, @ExceptionHandler,数据绑定 ,@NumberFormat ,
    @DateTimeFormat ,@Controller ,@Valid ,@RequestBody ,@ResponseBody等  -->
    <mvc:annotation-driven />
    <!--&lt;!&ndash; 静态资源处理， css， js， imgs &ndash;&gt;-->
    <!--<mvc:resources location="/assets/" mapping="/assets/**"></mvc:resources>-->
    <!-- 视图层配置 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/view/"/>
        <property name="suffix" value=".jsp"/>
    </bean> 
    <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>
</beans>

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

image.png