Ajax的理解与应用

一:ajax的参数理解

1.url:发送请求的地址,字符类型“String”

2.type:发送请求的方式,一般是post和get。post请求发送数据量大,且安全;get请求发送的数据量小,相对不安全

3.timeout:设置请求响应时间,请求超时之后会在error中执行

4.async:默认为true(异步)。同步就是发送请求之后,等待服务器响应之后才进行下一步操作;异步就是发送请求之后,可以 继续下一步操作,体验较好。所以一般情况会是异步操作

5.cache:设置false将不会从浏览器中加载请求信息

6.data:发送到服务器的数据,然后js对象将其转换成json传到后台

7.dataType:预期服务返回的数据类型,包括xml,text,html,script和json。json最为常见

8.beforeSend:在请求执行之前进行的操作。例:防止数据的重复提交,在提交之前,将事件设为无效,执行完之后,设为有效

9.complete:请求无论成功还是失败,都会回调的函数

10.success:请求成功后的回调函数

11.error:请求失败后的回调函数

12.contentType,dataFilter,global,ifModified,jsonp,username,password,processData和scriptCharset可百度

二:ajax的案例

1.ajax提交一般的表单数据(表单序列化)

//方法一:
jQuery.ajax({  
    type:'post',  
    url:'请求方法地址',  
    cache:false, //默认不从浏览器中加载请求数据
    async:true,  //默认为异步
    data:$("#formId").serialize, //表单序列化 
    dataType:'json',  //一定是dataType,如果是datatype会导致返回出错  
    success:funtion(data){  
    },  
    error:function(data){  
    }  
}); 
//方法二
jQuery("#FormId").ajaxSubmit({  
    type:'post',  
    url:'请求方法地址',  
    cache:false, 
    async:true,  
    dataType:'json',   
    success:funtion(data){  
    },  
    error:function(data){  
    }  
});
//提交图片文件
//前端
<form id="FormId" action="$!{basePath}/o2o/merchant/doAddPerson.do" method="post"  enctype="multipart/form-data">
<div class="weui-cell ">
<div class="weui-uploader__input-box-back">
	<img style="width:260px;height:130px" id="BackPic" value="0" >
    <input id="uploaderInputBack" name="BackPic" class="weui-uploader__input sfz2" type="file" accept="image/*" multiple>
</div>
</div>
jQuery("#FormId").ajaxSubmit({  
    type:'post',  
    url:'请求方法地址',  
    cache:false, 
    async:true,  
    dataType:'json',   
    success:funtion(data){  
    },  
    error:function(data){  
    }  
});
//后台
MultipartFile BackPic = request.getFile("BackPic");
String BackPicPath = saveIDCardPic(BackPic);
public String saveIDCardPic(MultipartFile file) throws IOException{
	log.info("保存图片saveIDCardPic file={}.",new Object[]{file});
	long start = System.currentTimeMillis();
	String realFilename=file.getOriginalFilename();
    String fileExtension = realFilename.substring(realFilename.lastIndexOf("."));
    String filename=UUID.randomUUID().toString().replace("-", "")+fileExtension;
    File dirPath = new File(imgFilePath+"/merchant");  
    if (!dirPath.exists()) {  
        dirPath.mkdirs();  
    }  
    String sep = System.getProperty("file.separator");  
    File uploadedFile = new File(dirPath + sep  
            + filename);  
    FileCopyUtils.copy(file.getBytes(), uploadedFile);
    log.info("saveIDCardPic runtime={}.",new Object[]{System.currentTimeMillis()-start});
    return "/merchant/"+filename;
}

2.ajax的滚动加载,分页展示

var pageNo = 1;  
var pageSize= 10;  
var requestFlag = true;//这里总共有三个变量:就是页码数,一页展示的数量,和是否继续加载  
$(function(){   
    scrollLoad();//最开始进入页面进入此方法  
    $(window).bind("scroll",function(){  
        //滚动加载  
        if ($(document).scrollTop() + $(window).height() > $(document).height()-10&&requestFlag = true) {  
        	requestFlag = false;//防止多次调用
            pageNo = pageNo+1;  
            scrollLoad(); 
        }  
    });  
}); 
function scrollLoad(){
	jQuery.ajax({
		type:'post',
		url:basePath+'/msgboard/scrollLoad.do?actId='+actId,
		data:{
			pageNo:pageNo,
			pageSize:pageSize
		},
		async:false,
		dataType:'json',
		success:function(data){
			//返回数据
			jQuery("#scroll").append(html);
			requestFlag = true;
		},
		error:function(data){},
	
	});
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值