Easyui动态加载后台数据的例子

最新推荐文章于 2024-02-17 21:45:02 发布

方块糖

最新推荐文章于 2024-02-17 21:45:02 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端技术文章标签： easyui ajax动态加载

本文链接：https://blog.youkuaiyun.com/gui66497/article/details/49308503

前端技术专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用EasyUI和AJAX实现接口验证查询的方法。具体步骤包括从前端获取IP和端口输入，利用AJAX调用后端接口进行数据交互，以及通过EasyUI的datagrid组件实时更新查询结果。

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

JS:

/**接口验证查询按钮*/
function strategyCheckSearch(){
	var strategyRows= $("#strategyCheckDg").datagrid('getRows');
	var strategyIp = $("#strategyIp").val().trim();
	var strategyPort = $("#strategyPort").val().trim();
	if(strategyIp.length < 1 || strategyPort.length < 1){
		$.messager.alert("错误","请输入IP和端口！",'info');
	}else{
		$.each(strategyRows,function(i,row){
			$.ajax({
				url : 'require/getStatusCodeByWget',
				type : 'post',
				data : {
					wgetString : JSON.stringify(row.wget),
					strategyIp : strategyIp,
					strategyPort : strategyPort
				},
				success : function(data) {
					var str = "";
					$.each(data,function(i,result){
						console.log(result);
						if(result.proxyPort == null){//端口值为null则不显示
							str += "【"+result.proxyAddress+"】"+result.responses[0].failed+"<br>";
						}else{
							str += "【"+result.proxyAddress+":"+result.proxyPort+"】"+result.responses[0].failed+"<br>";
						}
					});
					$("#strategyCheckDg").datagrid('updateRow',{
						index:i,
						row:{
							status : str
						}
					});
				}
			});
			
		});
	}
	
}

Controller:

/**根据wget获取状态码*/
@RequestMapping("getStatusCodeByWget")
@ResponseBody
public List<WgetResult> getStatusCodeByWget(@RequestParam("wgetString") String wgetString,HttpServletRequest request,
			@RequestParam("strategyIp") String strategyIp,@RequestParam("strategyPort") String strategyPort) {
	Wget wget = GsonUtil.toObject(wgetString, Wget.class);
	String[] ipStrings = strategyIp.split(",");
	List<String> ipList = Arrays.asList(ipStrings);
	List<WgetResult> WgetResultList = domainTransferService.validityStrtegy(wget,ipList,strategyPort);
	return WgetResultList;
}

要点就是使用$.ajax从后台获取数据之后,在success方法中获取easyui所有行的数据,然后通过$("#").datagrid('updateRow',{});刷新前台数据就可以实现了.