HTTP请求方法说明
在讲解ajax请求实现前,我们先了解一下http常用的6个请求方法:
方法 | 功能说明 |
---|---|
GET | 向特定的资源发出请求,url会被标识在浏览器地址栏 |
POST | 向指定资源提交数据进行处理请求,例如提交表单或者上传文件。 |
PUT | 向指定资源位置上传其最新内容 |
DELETE | 请求服务器删除Request所标识的资源 |
HEAD | 类似于 GET 请求,只不过返回的响应中没有具体的内容,用于获取报头 |
jquery发送ajax请求,简化原生js发送ajax的繁琐过程
ajax请求主要使用得比较多的两个场景就是,提交普通参数的请求和提交含有文件的请求,
下面我将会通过编写两个小示例来说明
1.第一个使用ajax异步请求修改用户密码的小示例
前端发送异步请求:
function updatePsd() {
var originalPsd = $("#originalPsd").val(); //原密码
var newPsd = $("#newPsd").val(); //新密码
var userId = $("#userId").val(); //用户id
$.ajax({
url: "/updatePassword", //请求url
type: 'POST', //请求方法
data: { //请求参数
"originalPsd": originalPsd,
"newPsd": newPsd,
"userId": userId
},
success: function (data) { //请求成功时调用
$.alert({
title: data.code,
content: data.msg,
});
},
error: function (data) { //请求失败时调用
$.alert({
title: 'Error',
content: '修改密码失败,请稍后重试!',
});
}
});
}
后端controller,使用springboot:
/**
* 登录状态下,修改密码
*
* @return
*/
@RequestMapping(value = "/updatePassword")
@ResponseBody
public Map<String,String> changePsd(@RequestParam(value = "userId") String userId,
@RequestParam(value = "originalPsd") String originalPsd,
@RequestParam(value = "newPsd") String newPsd) {
Long Id = Long.parseLong(userId.trim());
String originalPassword = MD5Util.getMD5(originalPsd);
String newPassword = MD5Util.getMD5(newPsd);
boolean flag = userService.updatePasswordByUserId(Id,originalPassword ,newPassword );
Map<String,String> data = new HashMap<>();
if (flag){
data.put("code","success");
data.put("msg","成功修改密码!");
return data;
}else {
data.put("code","error");
data.put("msg","修改密码失败,请稍后重试!");
return data;
}
}
Mapper
UPDATE user set password = #{newPsd}
where user_id = #{userId}
and password = #{originalPsd}
2.第二个使用ajax异步发送formdata修改用户头像的小示例
说明:修改头像,需要上传图片,不同于普通的提交参数,需要使用formdata发送文件数据流
html
<style type="text/css">
.file {
position: relative;
}
.file input {
position: absolute;
font-size: 18px;
right: 0;
top: 0;
opacity: 0;
}
</style>
<div class="col-md-2" style="margin-top: 10px;">
<label class="control-label file">
<div> //原头像
<img id="userUrl" style="border-radius: 100px;" src="${user.userUrl}"> //后端传过来的url
</div>
<input type="file" id="photo">
<input type="hidden" id="userId" value="${user.userId}">
</label>
<p style="margin-left: 20px;">点击头像选择图片,再点击上传</p>
<input id="changeBtn" style="width: 100px;margin-left: 20px;" class="btn btn-info" value="上传">
</div>
页面效果
js
$("#changeBtn").click(function () {
var formData = new FormData();
formData.append("photo",$('input#photo')[0].files[0]); //拿到提交的图片文件
formData.append("userId",$("#userId").val()); //需要把图片和用户关联起来
$.ajax({
url: "/changePhoto",
type: 'POST',
contentType: false,
processData: false,
data: formData,
success: function (data) { //请求成功时调用
$.alert({
title: data.code,
content: data.msg,
});
$("#userUrl").attr("src", data.userUrl); //使用jquery修改图片的src
},
error: function (data) { //请求失败时调用
$.alert({
title: 'Error',
content: '修改头像失败,请稍后重试!',
});
}
});
});
后端controller
/**
* 修改个人头像
*
* @return
*/
@RequestMapping(value = "/changePhoto")
@ResponseBody
public Map<String,String> changePhoto(@RequestParam MultipartFile photo, @RequestParam Long userId){
Map<String,String> data = new HashMap<>();
if (photo.isEmpty()){
data.put("code","error");
data.put("msg","上传图片为空!");
return data;
}
//获取MultipartFile文件的后缀
String suffix = photo.getOriginalFilename().substring(photo.getOriginalFilename().lastIndexOf(".") + 1);
if (suffix.equalsIgnoreCase("jpg") ||
suffix.equalsIgnoreCase("jpeg") ||
suffix.equalsIgnoreCase("png")){
OutputStream os = null;
InputStream inputStream = null;
String fileName = (userId + "") + System.currentTimeMillis() + ".jpg";
String userUrl = savePath+fileName;
try {
inputStream = photo.getInputStream();
} catch (IOException e) {
e.printStackTrace();
}
try {
byte[] bs = new byte[1024];
int len;
// 输出的文件流保存到本地文件
File tempFile = new File(writePath);
if (!tempFile.exists()) {
tempFile.mkdirs();
}
os = new FileOutputStream(tempFile.getPath() + File.separator + fileName);
// 开始读取
while ((len = inputStream.read(bs)) != -1) {
os.write(bs, 0, len);
}
os.flush();
userService.updateUserUserUrl(userId,userUrl);
System.out.println(userUrl);
data.put("userUrl", IpConfig.ip + userUrl);
data.put("code", "success");
data.put("msg","修改头像成功");
return data;
} catch (IOException e) {
e.printStackTrace();
data.put("code","error");
data.put("msg","修改头像失败,请稍后重试!");
return data;
} catch (Exception e) {
e.printStackTrace();
data.put("code","error");
data.put("msg","修改头像失败,请稍后重试!");
return data;
} finally {
// 完毕,关闭所有链接
try {
os.close();
inputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}else {
data.put("code","error");
data.put("msg","上传头像格式需要为jpg、jpeg、png!");
return data;
}
}
Mapper
<!-- 修改用户头像 -->
<update id="updateUserUserUrl">
UPDATE user set user_url = #{userUrl}
where user_id = #{userId}
</update>