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

最新推荐文章于 2021-12-26 18:21:28 发布

原创最新推荐文章于 2021-12-26 18:21:28 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax #JS

Java 同时被 2 个专栏收录

14 篇文章

订阅专栏

11 篇文章

订阅专栏

本文介绍了一个使用JS和Ajax实现的下拉框选择功能，当用户更改下拉框选项时，会触发Ajax请求，从后端获取并更新特定编号。此功能涉及JS编码、XMLHttpRequest使用及后端数据处理。

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

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

代码实现如下：

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<Map<String,Object>>  listmap = dynamicService.selmaxClwxbianhao(bumen);
		if(listmap!=null)    {
			for(int i=0;i<listmap.size();i++)
			{		if(listmap.get(i).get("MAXNUM")!=null&&!listmap.get(i).get("MAXNUM").equals("")){					
					String maxnum=listmap.get(i).get("MAXNUM").toString();
					if(maxnum!=null &&!maxnum.equals("")){
						int maxnum1=Integer.parseInt(maxnum)+1;
						bianhao=String.valueOf(maxnum1);
						break;
				}
				}else{
					bianhao=(year)+"000001";
				}
			}
		}
		else{
			bianhao=(year)+"000001";
		}
		JSONObject json = new JSONObject();
		json.put("bianhao", bianhao);
		
		//解决前台乱码
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		//取得流向JSP传递数据    
		try {
			response.getWriter().println(json.toString());
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;			
		
	}

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