Heim  >  Fragen und Antworten  >  Hauptteil

javascript - 如下的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
PHP中文网PHP中文网2750 Tage vor300

Antworte allen(2)Ich werde antworten

  • PHP中文网

    PHP中文网2017-04-10 15:39:45

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

    Antwort
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-10 15:39:45

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

    Antwort
    0
  • StornierenAntwort