jQuery $.post()方法发送参数取得JSON 字符串返回值并在页面展示

        在前一篇博文谈了BOM按层次展开JAVA后端处理程序和实现的算法。前后端有一个数据交互的过程，都是通过 JSON 实现的，前端通过 jQuery  AJAX的$.post()方法提交JSON 数据到ajaxbomexplosionlevel，返回JSON字符串后进行页面展示，详见前端的JSP 程序主要部分，在程序的相应部分进行了注释说明。

前端JSP 页面的主要部分，通过进入页面的 ${itemmasters}选择下拉列表，<tbody id="bd10"> 部分为动态输出结果数据区域
 
  请输入展开BOM的物品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <select id="parcode"  Class='iord5'>
            <option selected value=""></option>
                <c:forEach items="${itemmasters}" var="item" >
                <option value="${item.itemcode}">${item.itemcode } ${item.itemname }</option>
                </c:forEach>
     </select>

 <table id="mytable" style="border-collapse:collapse; border:1px; cellspacing:0px; cellpadding:2">
    <tr>  
           <td Class="iord40h">&nbsp;&nbsp;层  级</td>
           <td Class="iord40h">&nbsp;&nbsp;行项目</td>
           <td Class="iord4h">&nbsp;&nbsp;子项物品</td>            
           <td Class="iord421h">&nbsp;&nbsp;数  量</td>
           <td Class="iord42h">&nbsp;&nbsp;单  位</td>           
           <td Class="iord43h">&nbsp;&nbsp;物品名称</td>
          
        </tr>  
        <tbody id="bd10">            
            
    </tbody>
  </table>

JS 处理下拉列表时使用了一个 jquery 的控件 select.editable-select，此控件在使用下拉列表时不仅可以下拉选择，还可以输入值并根据输入值进行筛选满足条件值
select.editable-select 控件包括了 js 和 css 两个文件
jquery-editable-select.min.js
jquery-editable-select.min.css

<script type="text/javascript">
var jsonobj;
var parentcode;

$(function(){
// 下拉列表选择时进入下面函数
$('.iord5')
    //控件要求的格式
    .editableSelect()
    .on('select.editable-select', function (e, li) {  
   
    //下拉列表选择后取得选择值
    var parval1 = document.getElementById("parcode").value;
    //下拉列表的格式是 物品代码 + " " +物品名称，如 2000000010 电子产品整机A,下面两个语句解析出物品代码
    var parval2 = parval1.split(' ',1);
    parentcode = parval2.join('');       
    
    //准备向后台提交的参数
    var url = "${pageContext.request.contextPath }/ajaxbomexplosionlevel";
    var args = {"parentcode":parentcode,"date":new Date()};
    
    $.ajaxSettings.async = false;    
    //jquery $.post 提交，从后台处理生成结果 list 对象，list 对象转 JSON 字符串返回到参数data 
    $.post(url, args, function(data){    
    //很重要，返回的变量 data JSON 字符串转为 JSON 对象 jsonobj
       jsonobj = eval("(" + data + ")");      
         });         
     
     //在 id = "bd10" 的tbody 区域置空
     odiv = document.getElementById("bd10");
     odiv.innerHTML = "";
     var str = ""; 
     
    var inum =0;
    //通过循环生成要输出的动态 table 表，将HTML 输出写到 str 字符串中
    for(var i=0; i < jsonobj.length; i++) {
    inum = inum + 10;
    str +="<tr><td align=center Class='iord40'>" +  jsonobj[i].level + "</td>"; 

    str +="<td Class='iord40'>" + inum + "</td>"; 
  
    str += "<td  align=left Class='iord4'>" + jsonobj[i].subitemcode + " " + jsonobj[i].subitemname + "</td>";

    str +=  "<td align=right >" +  jsonobj[i].qty + "</td>";

    str += "<td  align=center Class='iord42'>" + jsonobj[i].unit + "</td>";

    str += "<td  align=left Class='iord43'>" + jsonobj[i].subitemname + "</td></tr>";
 
     } 
      //在 id = "bd10" 的tbody 区域输出查询结果
       odiv = document.getElementById("bd10");
       odiv.innerHTML = str;  
                 
    });        
    }); 
</script>