原生JS写Ajax及前后台传值应用实例

        项目有个点击下拉框改变不同编号的需求,如下图所示:

原生JS写Ajax及前后台传值应用实例_第1张图片

      代码实现如下:

        JS代码:



function docheckcq(){

    var myselect=document.getElementById("Ins_CD1TB1R0C0FD2");
    var index=myselect.selectedIndex;
    var tt=myselect.options[index].value;
    document.getElementById("Ins_CD1TB1R0C0FD2").value=tt;
    dept=document.getElementById("Ins_CD1TB1R0C0FD2").value;
    bumen=encodeURI(dept);
    //创建
    var xhr = new XMLHttpRequest();
    //连接
    xhr.open("get", "http://localhost:8080/ydrd/archivestask/searchClwxnum.do?bumen="+bumen, true);
    //发送
    xhr.send(null);
    //监听状态、处理数据
    xhr.onreadystatechange = function(){
        if (xhr.readyState == 4){
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                 var obj=eval('('+xhr.responseText+')');
    	       document.getElementById("Ins_CD1TB1R1C3FD32").value=obj.bianhao;
            } else {
                alert("Request was unsuccessful: " + xhr.status);
            }
        }
    };

}

        后台代码:

	/**
	 * Ajax查询汽车维修单编号
	 * ts 添加于2019-03-20
	 */
	public ModelAndView searchClwxnum(HttpServletRequest request,HttpServletResponse response) {
		String bumen="";
		try {
			bumen=URLDecoder.decode(request.getParameter("bumen"),"utf-8");
		} catch (UnsupportedEncodingException e) {
			e.printStackTrace();
		}
		int year=Calendar.getInstance().get(Calendar.YEAR);//获取当前年
		String bianhao="";
		List>  listmap = dynamicService.selmaxClwxbianhao(bumen);
		if(listmap!=null)    {
			for(int i=0;i

        当然,这段代码肯定可以进行一些优化,为什么要用JS写Ajax也是受限于项目平台所致。大家有什么意见建议以及批评等,欢迎及时提出。谢谢!

你可能感兴趣的:(Java,JS)