代码之家 › 专栏 › 技术社区 › Claudio

如何使用post方法通过ajax发送动态生成的变量

checkbox post forms ajax html

Claudio · 技术社区 · 15 年前

我有一个html页面,其中包含一个表、一些行和我选中的任何行。当我选中一个复选框,我会删除邮件,但只有当我点击一个红色的死亡按钮。

例子
桌子
tr(唯一标识)
td[复选框]
td含量
td其他内容
[... 以此类推]
/表
[死亡的红色按钮]

现在,必须在不重新加载页面的情况下删除多行,因此我设置了一个ajax函数,其工作方式如下:

设置ajax对象。
等待“url”页面的响应。。。。喝杯咖啡,休息一下。
得到响应,使用jquery使用行的唯一id删除行。
jquery:为刚刚完成的操作弹出一个反馈
jquery:更新页面周围的一些计数器

因此,我开始尝试删除一条记录,一切正常,我在调用函数的每一行上创建了一个链接,以删除传递项id的“单记录”。

但现在我要开发毁灭的多重删除。我想到的第一件事是“我可以用‘表单’封装表格,然后用‘post’方法发送所有内容”。这似乎是聪明和容易的。。。。
但不起作用:-|

下面是进行ajax调用的函数以及其他所有函数

function deleteSelected() {
    var params = null;
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("post", "./cv_delete_pm.php?mode=multi", true); //cancella i messaggi e ritorna l'id delle righe da cancellare
    //Send the proper header information along with the request
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", params.length);
    http.setRequestHeader("Connection", "close");

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4) {
            if (xmlhttp.status != 404) {
                var local = eval( "(" + xmlhttp.responseText + ")" );
                /*
                //cancella gli elementi specificati dalla response
                var Node = document.getElementById(local.id);
                Node.parentNode.removeChild(Node);
                loadMessagesCount('{CUR_FOLDER_NAME}'); //aggiorna sidebar e totale messaggi nel body
                initTabelleTestate(); //ricrea lo sfondo delle righe
                $("#msgsDeleted").attr("style", "left: 600px; top: 425px; display: block;");
                $("#msgsDeleted").fadeIn(500);
                $("#msgsDeleted").fadeOut(2000);
                $("#msgsDeleted").hide(0);
                */
            }
        }
    };
    xmlhttp.send(params);
}

实际上变量'param'被设置为null只是因为我在做一些实验。

所以,问题是

是:

-是否可以获取html页的所有选中复选框的名称/值/id(其中之一)?怎么用?

用答案回答这两个问题中的一个就足以赢得我个人的崇拜:)

2 回复 | 直到 14 年前

Allan 15 年前

http://api.jquery.com/category/ajax/

您应该使用javascript框架(如dojo或jquery)来处理Ajax。不建议从头开始编写自己的ajax函数。

一些框架:

jquery示例(您已经在使用这个框架了吗?):

$.post("test.php", $("#testform").serialize());

Dojo示例:

使用POST和Ajax提交表单:

  function postForm() {


                var kw = {
                    url:    'mypage.php',
                    load:    function(type, data, evt) {

                        dojo.byId("someElement").innerHTML=data;



                    },

                    formNode: dojo.byId("myForm"),
                    method: "POST",
                    error: function(type, data, evt){
                       //handle error

                    },
                    mimetype: "text/html"
                };

                dojo.io.bind(kw);

            }

Claudio 15 年前

我使用jquery的内置函数来管理表单sumbit,使用$jquery.post()函数和$(#idform).serialize()函数。现在已经很晚了,但明天我会尽量记住在这里粘贴正确的代码:)

不管怎样,谢谢你的回答:)

更新(代码如下):

//Send by Post
function deleteSelected() {
    $.post("./delete.php?mode=multi", 
        $("#pmfolder_form").serialize(),
        function(data){
            var local = eval( "(" + data + ")" );
                    //this delete the html via dom to update the visual information
            for (var i = 0; i < local.length-1; ++i) {
                var Node = document.getElementById(local[i]);
                Node.parentNode.removeChild(Node);
            }
        });
}

选择框的结构类似于:

<input type="checkbox" name="check_<? print $progressive_id; ?>" value="<? print $real_id; ?>"/>