phpstudy集成环境

 首页 > 如下的DOM结构,我如何点击 删除 让与之对应的数据提交表单?

如下的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

简单写了下，很久没有写原生的了，好多都忘了。
加入这段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>

//用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逻辑
    };  

});
【热门文章】
【热门文章】