JQuery AJAX方法

最新推荐文章于 2024-10-12 11:10:30 发布

原创最新推荐文章于 2024-10-12 11:10:30 发布 · 384 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ajax

JS 同时被 2 个专栏收录

9 篇文章

订阅专栏

Jquery

2 篇文章

订阅专栏

本文深入探讨了前端开发中常用的Ajax技术，包括$.get、$.post和$.ajax三种方法的使用场景与实现细节，通过具体代码示例展示了如何利用这些方法进行数据获取与处理。

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

一、 $.get(URL,data,function(data,status,xhr),dataType)

在这里插入图片描述

var url = 'pinfo/statistics/pCase';
var params = {};
var timest = $("#searchForm input[name=timest]").val();
var timeed = $("#searchForm input[name=timeed]").val();
if(timest != "" && timeed != "") {
	params.timest = timest;
	params.timeed = timeed;
}else if(timest == "" && timeed == "") {
	
}else {
	bootbox.alert("“时间”选择有误，请填写完整或清除！");
	return;
}
if(timest.length > 0){
	var sDate = new Date(timest);  
	var eDate = new Date(timeed);  
	if(eDate < sDate){
		bootbox.alert("结束时间要大于开始时间");
   		return;
	}
}
$.get(url,params, function(data) {
	var result = eval('('+data+')');
	var tip = "";
	tip = "(TOP10)"
    
	var name=[];
	var llzs=[];
    for(var i=0;i<result.data.length;i++){
     	if(params.tjlx == "0"){
     		name.push("("+result.data[i].areacode.replace("市","")+")"+result.data[i].name);
     	}else{
     		name.push(result.data[i].name);
     	}
     	llzs.push(result.data[i].llzs);
     	//更新页面内容操作...
     }
  });

@RequestMapping(value = "/pCase", method = RequestMethod.GET, produces = "text/html;charset=UTF-8")
public String pCase(P record,Model model) {
		try {
			super.resultList = pService.pCase(record,tjlx);
			auditInfo.setResult("成功");
		} catch(LogicException ex){
			ex.printStackTrace();
			auditInfo.setResult("失败");
			super.szMessage = ex.getMessage();
		} catch (Exception e) {
			e.printStackTrace();
			auditInfo.setResult("失败");
			super.szCode = GlobalSettings.SysReturnCode.Failure.getKey() + "";
			super.szMessage = e.getMessage();
		}
		return super.jsonResult4Page(null);
	}

/**
	 * 封装DataTable分页参数
	 * @param resultList
	 * @param page
	 * @return
	 */
	protected String jsonResult4Page(BaseEntity<?> entity) {
		Map<String, Object> map = Maps.newHashMap();
		map.put("code", szCode);
    	map.put("message", szMessage);
		map.put("data", resultList);
		if (entity != null && entity.getPage() != null) {
			map.put("recordsTotal", entity.getPage().getTotalCount());
			map.put("pagesTotal", entity.getPage().getTotalPages());
			map.put("pageNo", entity.getPage().getPageNo());
			map.put("recordsFiltered", entity.getPage().getTotalCount());
		}
				
		return JSONUtil.map2json(map);
	}

public static String map2json(Map map) {
        StringBuilder json = new StringBuilder();
        json.append("{");
        if (map != null && map.size() > 0) {
            for (Object key : map.keySet()) {
                json.append(object2json(key));
                json.append(":");
                json.append(object2json(map.get(key)));
                json.append(",");
            }
            json.setCharAt(json.length() - 1, '}');
        } else {
            json.append("}");
        }
        return json.toString();
    }

二、$(selector).post(URL,data,function(data,status,xhr),dataType)

在这里插入图片描述

showMask();
var url = "/center/getimg";
var params = {};
$.post(url,params, function(data) {//data为字符串
	hideMask();
    if(data==null||data==""){
    	bootbox.alert("该记录无图片！");
   		return;
    }else{
   		var imgsrc = "data:image/png;base64,"+data;
   	    document.getElementById("pic-img").src=imgsrc;
    }
});

@RequestMapping(value = "/getimg", method = RequestMethod.POST, produces = "text/html;charset=UTF-8")
public String getimg(P mp,Model model) {
	String imgurl = mp.getp1();
	String output = "";
	try {
		String urlString = imgurl;
        output = new String(HttpsUtil.sendAndRcvHttpGetBase(imgurl, null, "utf-8", 60000, 60000, "application/x-www-form-urlencoded;charset=utf-8", null));
		super.szCode = GlobalSettings.SysReturnCode.Success.getKey() + "";
		auditInfo.setResult("成功");
	} catch(LogicException ex){
		ex.printStackTrace();
		auditInfo.setResult("失败");
		super.szCode = GlobalSettings.SysReturnCode.Failure.getKey() + "";
		super.szMessage = ex.getMessage();
	} catch (Exception e) {
		e.printStackTrace();
		auditInfo.setResult("失败");
		super.szCode = GlobalSettings.SysReturnCode.Failure.getKey() + "";
		super.szMessage = e.getMessage();
	}
	return output;
}

三、$.ajax({name:value, name:value, … })

在这里插入图片描述

$.ajax({
	url: 'rest/pinfo/pquery/updatePointPhoto',
	type: 'POST',//向后台请求的方式，有post，get两种方法
	data: fm,//FormData封装
	dataType: 'json',//服务器响应的数据类型
	contentType: false, //禁止设置请求类型 
	processData: false, //禁止jquery对DAta数据的处理,默认会处理 //禁止的原因是,FormData已经帮我们做了处理
	/* beforeSend: LoadFunction(), //加载执行方法 */
	success: function (json) {//请求的返回成功的方法
		var mydata = json.data;
		var imgurl = "";
		imgurl = json.imgurl;
		document.getElementById(myfile).setAttribute("src",mydata);
		document.getElementsByName(myfile)[0].value = imgurl;
	},
	error : function(XMLHttpRequest, textStatus, errorThrown) {//请求的失败的返回的方法,一般不写该方法，直接在服务器端捕获异常，封装进success方法中json
		alert("异常信息！");
	}
});