Jquery动态生成表单

最新推荐文章于 2025-06-06 12:29:44 发布

原创

最新推荐文章于 2025-06-06 12:29:44 发布 · 3.3k 阅读

3 ·

CC 4.0 BY-SA版权

该博客介绍了如何在网页加载时通过Ajax获取JSON数据，并动态创建jQuery表单来显示这些数据。首先，控制器通过HTTP请求获取数据，然后在前端页面利用jQuery解析JSON并生成表格，包括选择框、输入框等元素，同时提供查询、清空和保存功能。在保存数据时，进行了金额格式校验，并通过Ajax提交更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

界面初始化，在界面加载的时候使用Ajax发起请求查询数据返回到界面进行初始化。

Aajx发起请求后根据后台返回的JSON类型的结果集动态生成表单并显示结果。

后台返回数据(JSONArray)：

@Controller

@RequestMapping("/chushihua")

public class ZtController{

@RequestMapping("/initPage")

@ResponseBody

public JSONArray initPage(HttpServletRequest request,Model model) throws Exception{

Sting ny = request.getParameter("ny");

JSONArray initData = service.getSearchResult(ny);

return initData;

}

前台jsp页面显示：

<body style="padding: 4px">
<div id="root" class="easyui-layout" data-options="fit:true" style="padding:4px">
    <div id="filter" data-options="region:'north',title:'查询条件'" data-bind="show:elements.length>0" style="padding:8px;background-color:#F9F7F4; height:100px" >

        <table width="100%" cellpadding="0" cellspacing="4">
            <tr>
     <td class="td_title" align="right">所属年月:</td>
     <td class="td_normal">
      <select name="string(SSND)" id="SSND" style="width:100px"></select>年
      <select name="string(SSYF)" id="SSYF" style="width:100px"></select>月
      <span style="color:red">*</span>
     </td>

     <td align="center">
                <input type="button" id="cx" value="查询" onClick="query()" class="button_normal"/>
                <input type="button" id="qk" value="清空" onClick="reset()" class="button_normal"/>
                </td>
   </tr>
        </table>

    </div>
    <div id="report" data-options="region:'center'" style="overflow-x: scroll">

    <span>单位：万元</span>
    <table id="table" width="100%" border="1" cellspacing="0" cellpadding="0" bordercolorlight="#cccccc" bordercolordark="#FFFFFF" class="table_main">
    </table>
    </div>
</div>