AJAX实例

来源：互联网发布：手机淘宝退货率编辑：程序博客网时间：2024/05/21 10:38

function changeSerive(obj){
if(obj.selectedIndex==0){ // 下拉框不选择的时候的操作
document.forms[0].cboService.selectedIndex = 0;
document.forms[0].cboService.disabled=true;

}else{

// 下拉框选择了值，就要后台取出数据，连动到别的界面控件的值

var path = $("#rootPath").val();

var url=path+'/M_PPM/M_PPM_S04GetServiceAjax.do?cboCategory='+$(".cboCategory").val(); // 完整的URL路径

$.ajax({ //调用AJAX 2个参数 type url， success 函数接受返回的结果，然后改变需要改变的值。 select控件的html就是option的列表
type: 'POST',
url: url,
success: function(listService){ //listService是返回的字符串
$(".cboService").html(listService);
document.forms[0].cboService.disabled=false;
$(".cboService").attr("style","width:50%");
}
});
}

}

JSP界面的代码，加了onchange的处理：

<html:select name="_m_ppmFormS04" property="cboCategory" styleClass="cboCategory"onchange="changeSerive(this);" style="width:50%">
<option value=""><bean:message key="screen.m_ppms02.selectone"/></option>
<html:optionsCollection name="_m_ppmFormS04" property="cboCategoryList" label="svcGrpName" value="svcGrp"/>
</html:select>

后台的Java代码：

import com.google.gson.Gson;

public class M_PPM_S04GetServiceAjaxAction extends ActionEx {

/**
* queryDAO object
*/
protected QueryDAO queryDAO = null;

/**
* type of reponse
*/
private static String JSON = "application/json";

public ActionForward doExecute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
Gson googleSon = new Gson();
String jsonString = "";

String cboCategory = request.getParameter("cboCategory"); //获得参数
// 获得结果集
List<Service> cboServiceList = queryDAO.executeForObjectList("SELECT.M_PPM.S04.SERVICE", cboCategory);

StringBuffer services = new StringBuffer();
// 拼接结果字符串
if (cboServiceList!=null && 0<cboServiceList.size() ){
services.append("<option value=''>- Please Select One -</option>");
for (Service service : cboServiceList) {
services.append("<option value='")
.append(service.getIdService())
.append("'>")
.append(service.getSvcDesc())
.append("</option>");
}
} else {
services.append("<option value=''>- Please Select One -</option>");
}


//convert the period to JSON string
jsonString = googleSon.toJson(services.toString());

// set type for the response
response.setContentType(JSON);
try {
// write JSON string into the response
response.getWriter().print(jsonString);
} catch (IOException e) {
e.printStackTrace();
}
return null;
}

public QueryDAO getQueryDAO() {
return queryDAO;
}

public void setQueryDAO(QueryDAO queryDAO) {
this.queryDAO = queryDAO;
}
}

设置response的类型为，application/json，用response直接写出 jsonString rerun null Action 当severlet 用

$.ajax JQuery