Jquery调用Ajax实现联动使用json

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

在很多时候我们都会使用到联动。jquery.js是一个不错的js框架。其ajax也挺不错。下面将实现一个js联动:选择公司出来受益人。根据公司不同受益人不同。

前提是：你用引入jquery.js

<script language="javascript" src="../js/jquery-1.4.4.min.js"></script>

页面JS：

// 更换公司
function changeCompany(company_name){
   var id_beneficiaryObj = $("#id_beneficiary");  
   var date_belong = $("#date_belong").val();
   id_beneficiaryObj.empty();        // 清空  
   id_beneficiaryObj.prepend("<option value=''>请选择</option>"); 
   
   $.ajax({  
       type: "POST",  
       dataType: "json",  
       url: "beneficiary_um_action.jsp",  
       data: { tabid: "selectCompanyUser",
                  company_name: company_name, 
                  date_belong: date_belong
                },  
       success: function (data) {   
           $.each(data, function (i, n) {  
                   // 追加项
               id_beneficiaryObj.append("<option value=" + n.id_beneficiary + ">" + n.beneficiary_name + "</option>");  
           });  
       }  
   });  
}

页面html：

<tr>
      <td width="20%" align="center">公司名称</td>
    <td >
      <select name = "company_name" id="company_name" onchange="changeCompany(this.value);">
          <option value="">合计</option>
          <c:if test="${not empty dateBelongList }">
              <c:forEach var="company" items="${companyList }">
                 <option value="<c:out value='${company.company_name }' />"><c:out value='${company.company_name_name }' /></option>
             </c:forEach>
          </c:if>
      </select>
    </td>
    <td width="20%" align="center">受益人</td>
    <td >
      <select name="id_beneficiary" id="id_beneficiary">
          <option value="">请选择</option>
      </select>
    </td>
  </tr>

请求联调数据的java类 beneficiary_um_action.jsp：

if ("selectCompanyUser".equals(tabid)) 
{
    if (!StringUtil.isEmpty(company_name))
    {

        String id_um = (String)session.getAttribute(CommonConstants.USER_ID);
        String jsonString = beneficiaryUmDAO.getBeneficiaryInfoByCompanyName(company_name, id_um);
        response.getWriter().write(jsonString);
    }
    return;
}

beneficiaryUmDAO:

/**查询_根据公司名称所属年月查询公司下受益人信息
     * 
     * @param company_name 公司名称
     * @param date_belong 所属年月
     * @return
     * @throws ServerException
     */
    public String getBeneficiaryInfoByCompanyName(String company_name, String id_um) throws ServerException {
        try {
            if (StringUtil.isEmpty(company_name))
            {
                return null;
            }
            Map<String, Object> param = new HashMap<String, Object>();
            param.put("company_name", company_name);
            param.put("id_um", id_um);
            List<BeneficiaryInfo> beneficiaryInfoList = (List<BeneficiaryInfo>) sqlMapper.queryForList("select_BeneficiaryInfo_select", param);
            JSONArray jsonArray = new JSONArray();
            for (BeneficiaryInfo info : beneficiaryInfoList)
            {
                JSONObject json = new JSONObject();
                json.put("id_beneficiary", info.getId_beneficiary());
                json.put("beneficiary_name", info.getBeneficiary_name());
                jsonArray.put(json);
            }
            
            return jsonArray.toString();
        } catch (SQLException e) {
            throw new ServerException(e);
        }
    }