一个相册页面，要实现选中图片删除图片，在利用ajax通过URL传递参数时，不知道应该怎么确定参数，后台接口需要"member_id":和"delete_value":，但不知道"delete_value":怎么表示；
接口：
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=750,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="">
<meta name="format-detection" content="telephone=no">
<title>我的相册</title>
<link rel="stylesheet" href="css/slicy.css">
<link rel="stylesheet" href="css/style-st.css">
<link rel="stylesheet" href="css/style-st.css" />
</head>
<style>
.photo_list ul li .img img{
width: 234px; height: 301px; border: 0; outline: none;
} </style>
<body>
<p class="layout">
<p class="header header5">
<h2>个人相册</h2>
</p>
<p class="photo_list">
<form id="photoForm">
<ul>
<li>
<p class="file">
<input type="file" name="file" id="getImage0" value=""
accept="image/jpg,image/jpeg,image/png,image/gif"
onchange="javascript:setImagePreview('getImage0','img0','Img_Hidden5');" />
<input type="file" name="file1" id="getImage1" value=""
accept="image/jpg,image/jpeg,image/png,image/gif"
onchange="javascript:setImagePreview('getImage1','img1','Img_Hidden5');" />
<input type="file" name="file2" id="getImage2" value=""
accept="image/jpg,image/jpeg,image/png,image/gif"
onchange="javascript:setImagePreview('getImage2','img2','Img_Hidden5');" />
<input type="file" name="file3" id="getImage3" value=""
accept="image/jpg,image/jpeg,image/png,image/gif"
onchange="javascript:setImagePreview('getImage3','img3','Img_Hidden5');" />
<input type="file" name="file4" id="getImage4" value=""
accept="image/jpg,image/jpeg,image/png,image/gif"
onchange="javascript:setImagePreview('getImage4','img4','Img_Hidden5');" />
</p>
</li>
<li>
<p class="img">
<img id="img0" src=""/>
</p>
<p class="ico" style="display: none;">
<img src="imgs/ico-st14.png"/>
</p>
</li>
<li>
<p class="img">
<img id="img1" src=""/>
</p>
<p class="ico" style="display: none;">
<img src="imgs/ico-st14.png"/>
</p>
</li>
<li>
<p class="img">
<img id="img2" src=""/>
</p>
<p class="ico" style="display: none;">
<img src="imgs/ico-st14.png"/>
</p>
</li>
<li>
<p class="img">
<img id="img3" src="">
</p>
<p class="ico" style="display: none;">
<img src="imgs/ico-st14.png"/>
</p>
</li>
<li>
<p class="img">
<img id="img4" src=""/>
</p>
<p class="ico" style="display: none;">
<img src="imgs/ico-st14.png"/>
</p>
</li>
</ul>
<h4>最多上传5张照片</h4>
<input type="hidden" name="member_id" />
<p class="submit submit-mt70" style="margin-top: 20px;">
<input onclick="uploadPic()" type="button" name="" id="uploadPhoto" value="上传图片" class="ui-submit"/>
</p>
<p class="submit submit-mt70" style="margin-top: 20px;">
<input onclick="deletePic()" type="button" name="" id="deletePhoto" value="删除图片" class="ui-submit"/>
</p>
</form>
</p>
</p>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<!--<script type="text/javascript" src="js/script.js"></script>-->
<script>
var member_id = localStorage.getItem("member_id");
var photo_mode = 0; //0为未上传图片,1为已上传图片
var imgIndex = 0; //图片序数
var delete_value;
//All_Url = "http://192.168.1.113:8011/";
$(function () {
//页面不足一屏，铺满一屏
$('.layout').css('min-height',$(window).height());
//切换功能
$('.header .right a.ico_more').click(function(){
$('.header .right ul').slideToggle();
return false;
})
$('.ui-taber').each(function(){
var obj = $(this);
//var con = obj.data('for');
obj.find('li').click(function(){
obj.find('li').removeClass().eq($(this).index()).addClass('selected');
//$('.'+ con).hide().eq($(this).index()).show();
return false;
})
});
//图片只读
$("[type=file]").hide().eq(0).show();
//查看图片
$.ajax({
url: All_Url + 'personAlbum/lookMePhotoAlbum',
data: JSON.stringify({
"member_id":parseInt(member_id)
}),
dataType: 'json',
type: 'post',
timeout: 10000,
success: function (data) {
//console.log(data);
if (data.stateCode == 200) {
$("#img0").attr("src",data.data.p1);
$("#img1").attr("src",data.data.p2);
$("#img2").attr("src",data.data.p3);
$("#img3").attr("src",data.data.p4);
$("#img4").attr("src",data.data.p5);
//$("#uploadPhoto").hide();
//$("#getImage").attr("disabled","disabled");
}else if (data.stateCode == 500){
alert("请上传图片!");
}
},
error: function () {
alert("显示图片失败,请重试!");
//开启登录按钮
}
});
//选中图片显示图标
$('.photo_list li').click(function(){
if($(this).find('.ico').is(':visible')){
$(this).find('.ico').hide();
}else{
$(this).find('.ico').show();
}
})
})
//下面用于图片上传预览功能
function setImagePreview(doc, preview, localImag) {
var docObj = document.getElementById(doc);
var imgObjPreview = document.getElementById(preview);
if (docObj.files && docObj.files[0]&&imgIndex<5) {
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '234px';
imgObjPreview.style.height = '301px';
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
imgIndex++;
$("[type=file]").hide().eq(imgIndex).show();
}else if (imgIndex>=5) {
imgIndex=5;
alert("最多上传5张图片!")
}
return true;
}
var deletePI;
function deletePic() {
$(".photo_list ul li").each(function() {
if($(this).find(".ico").is(':visible')){
// $(this).find(".img img").attr("src","");
// $(this).find(".ico").hide();
}
});
$.ajax({
url: All_Url + 'personAlbum/deletePhoto',
data: JSON.stringify({
"member_id":parseInt(member_id),
"delete_value":？？？？
}),
dataType: 'json',
type: 'post',
timeout: 10000,
success: function (data) {
//console.log(data);
if (data.stateCode == 200) {
alert("删除成功！");
}
},
error: function () {
alert("删除图片失败,请重试!");
//开启登录按钮
}
});
}</script>
</body>
</html>
页面图：
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
你渲染DOM的时候，你就把图片的标识（一般来说就是id），绑定到DOM上。然后你点击的时候就是把你点击的DOM上的标识取出来。删除的时候，就是删除的是你点击过的么。