如下的DOM结构,我如何点击 删除 让与之对应的数据提交表单?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li class="checkbox">
<input type="checkbox" class="can_checkout is_checkout_item" checked="checked" data-sellerid="131432" value="goods_13027_54564">
<input type="hidden" name="seller_id" value="131432">
<input type="hidden" name="obj_type" value="goods">
<input type="hidden" name="goods_ident" value="goods_13027_54564">
<input type="hidden" name="goods_id" value="13027">
<input type="hidden" name="min" value="1">
<input type="hidden" name="max" value="16777215">
<input type="hidden" name="stock" value="16777215">
</li>
<li><a href="javascript:;">删除</a></li>
</ul>
<ul>
<li class="checkbox">
<input type="checkbox" class="can_checkout is_checkout_item" checked="checked" data-sellerid="131432" value="goods_13027_54564">
<input type="hidden" name="seller_id" value="888888">
<input type="hidden" name="obj_type" value="goods">
<input type="hidden" name="goods_ident" value="566612">
<input type="hidden" name="goods_id" value="36262">
<input type="hidden" name="min" value="1">
<input type="hidden" name="max" value="16777215">
<input type="hidden" name="stock" value="16777215">
</li>
<li><a href="javascript:;">删除</a></li>
</ul>
</body>
</html>
需求是点击每个'删除' 按钮需要提交对应的input 数据到服务器端,如何实现.最好用原生的javascript
天儿不错嘛
9 years, 9 months ago
Answers
//用jquery大概如痴
$('body').on("click","ul li a",function(){
//收集你的input参数构建成json对象
//执行需要的业务逻辑,显示逻辑(显示loading提示框,设置checkbox值等)
$.ajax({
//balabla~~~收集你的input参数构建成json对象,提交到后台
success:function(){
//删除成功后的逻辑
},
error:fucntion(){
//失败后的逻辑
}
});
});
//用原生的,大概如此
var body= document.getElementsByTagName('body')[0];
body.addEventListener("click",function(e){
var e = e || window.event;
var target = e.srcElement || e.target;
if( target.tagName.toUpperCase() == "A" ){
//ajax逻辑
};
});
猫猫天飞
answered 9 years, 9 months ago
简单写了下,很久没有写原生的了,好多都忘了。
加入这段js, 基本上可以提交数据了。 注意,可能会有浏览器兼容性问题。
<script type="text/javascript">
function bindEvent(target, type, handler, useCapture){
if (target.addEventListener){
target.addEventListener(type, handler, useCapture);
}else if (target.attachEvent){
target.attachEvent('on'+type, handler);
}else{
target['on'+type] = handler;
}
}
function doAjax(target, url, data){
var httpRequest = null;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!httpRequest) {
return false;
}
httpRequest.onreadystatechange = dealResponse;
httpRequest.open('post', url);
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.send(data);
function dealResponse() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert('server error');
}
}
}
}
function postData(event){
var target = null,
inputNodes,
data = '',
key, value;
event = event || window.event;
target = event.target || event.srcElement;
inputNodes = target.parentNode.parentNode.getElementsByTagName('input');
for (var i = 0; i < inputNodes.length; i ++){
key = inputNodes[i].name;
value = inputNodes[i].value;
if (key){
if (data){
data += '&'+encodeURIComponent(key)+"="+encodeURIComponent(value);
}else{
data += encodeURIComponent(key)+"="+encodeURIComponent(value);
}
}
}
doAjax(target, "/test/nihao/", data);
return false;
}
var buts = document.getElementsByTagName('a');
for (var i = 0; i < buts.length; i ++){
bindEvent(buts[i], 'click', postData, false);
}
</script>
anxdy
answered 9 years, 9 months ago