利用AJAX完成控件的联动（示例）以及验证

完成功能：如下图所示，选择下拉列表“名称”（struts2的autocompleter）中的某项，根据选择的值读取数据库中对应的代码值，并显示在代码textfield中。

环境：ssh，jsonplugin-0.32.jar

步骤1. 从数据库中读取名称列表，作为名称的显示项。autocompleter需要json格式的数据。这里使用jsonplugin-0.32.jar将action要传递的数据转换为json格式。

（1）jsonplugin-0.32.jar放入lib文件夹；

（2）action内容：

 public String allNames(){
  List<Organizationcode> orgCodesList=organizationCodeDAO.findAll();
  for(Organizationcode orgCode:orgCodesList){
   organizationNames.add(orgCode.getOrganizationName());
  }
    return SUCCESS;
 }

struts配置：

 <package name="jsonData" extends="json-default">
  <action name="allNames" class="..." method="...">
      <result type="json">
          <param name="root">organizationNames</param>
      </result>
  </action> 

 </package>

jsp页面：

//autocompleter名称

<s:url id="Names" value="allNames.action"/>
     <s:autocompleter name="name" id="name" theme="ajax" autoComplete="false" forceValidOption="true" dropdownWidth="240" resultsLimit="1000"
      value="" searchType="substring" href="%{Names}"  size="50" notifyTopics="/Names"/><div id="div" style="display:inline" ></div>

 

步骤2：验证并取对应的code。

（1）action内容

 public String getCodeByName()throws Exception{
  String returnText="";

  HttpServletRequest request=ServletActionContext.getRequest();
  name=request.getParameter("name");
  name=java.net.URLDecoder.decode(name, "UTF-8");
  
  organizationList=organizationDAO.getOrganizationNames(name);
  if(!organizationList.isEmpty()){
   returnText="该机构已经存在，请核查！"+"-";
  }else{
   returnText="该机构尚未注册！"+"-";
  }
  
  this.setCode(organizationCodeDAO.getCodeByName(this.getName()));
  returnText+=this.getCode();
  
  HttpServletResponse response=ServletActionContext.getResponse();

  response.setContentType("text/html;charset=UTF-8");
  response.setHeader("Cache-Control", "no-cache");
  
  PrintWriter out=response.getWriter();
  out.write(returnText);
  
  return null;
 }

struts配置：

   <action name="getCodeByName" class="OrganizationManagementAction" method="getCodeByName">
      <result ></result>
  </action>

jsp页面：

<input name="code" type="text" class="form_field_default" size="50" id="code" value="" readonly="readonly">

script（此处代码部分引自网络）：

//创建xmlHttpRequest
var xmlHttpRequest ;
function createXMLHttpRequest(){
    if(window.ActiveXObject){
        //如果是IE浏览器
        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP") ;
    }
    else if(window.XMLHttpRequest){
        //如果是非IE浏览器
        xmlHttpRequest = new XMLHttpRequest() ;
    }
}

dojo.event.topic.subscribe("/Names",function(data,type,e){

 var completer=dojo.widget.byId("name");
 var organizationName=completer.comboBoxSelectionValue.value;
    var url="getCodeByName.action?name="+organizationName;
    url=encodeURI(url);
    url=encodeURI(url);
                  
    //1创建XmlHttpRequest组键
    createXMLHttpRequest();
    //2初始化XmlHttpRequest，true表示使用异步，false表示同步
    xmlHttpRequest.open("GET",url,true) ;

    //3创建回调用函数
    xmlHttpRequest.onreadystatechange = back ;
    //4发送请求
    xmlHttpRequest.send(null);
});

//回调函数，完成操作后，最后调用这个函数显示结果
function back(){
    //4表示完成 200表示运行正常
    if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
        var str=xmlHttpRequest.responseText;//获取PrintWriter输出信息
  var reback=new Array();
  reback=str.split("-");
       
        document.getElementById("div").innerHTML="<font size='2' color='green'>"+reback[0]+" </font>"
        document.getElementById("code").value=reback[1];
     
    }
}