Jquery调用Ajax实现联动使用json

在很多时候我们都会使用到联动。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);
        }
    }

就这样完成了。