AJAX实例

最新推荐文章于 2019-11-04 08:36:43 发布

原创最新推荐文章于 2019-11-04 08:36:43 发布 · 800 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

这篇博客展示了如何使用AJAX实现JSP界面与后台Java代码的交互，当用户在下拉框中选择值时，后台动态获取数据并更新其他界面控件。通过设置HTTP响应类型为'application/json'，将数据以JSON格式返回，供前端JQuery的AJAX函数处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}
}