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

时间:2010-07-02 10:33:47

标签: html ajax forms post checkbox

我有一个html页面,其中包含一个表,一些行和任何行内的复选框。 当我选择一个复选框时,我将删除该消息但仅当我点击一个红色按钮时。

实施例

TR(UNIQUE_ID)
td [复选框]
td内容
td其他内容
[......等等]
/表
[红按钮的死亡]

现在,删除多行必须没有重新加载页面,所以我设置了一个像这样工作的ajax函数:

  1. 设置ajax对象。
  2. 设置open方法(post / get,url,true)...
  3. 等待“网址”页面的响应....拿一杯咖啡,休息一下。
  4. 得到了回复,使用jquery使用行的唯一ID删除行。
  5. jquery:弹出刚刚完成的操作的反馈
  6. jquery:更新页面周围的一些计数器
  7. 所以,我开始尝试删除单个记录,一切顺利,我已经在每个调用该函数的行上创建了一个链接,删除了传递该项目ID的“单个记录”。

    但现在我要开发多重删除的厄运。 我认为的第一件事是“我可以用''形式'包围表格并用'post'方法发送所有内容”。 这看起来很棒而且容易.... 但不起作用: - |

    谷歌搜索我发现了一些似乎建议设置包含要发送的项目的变量的示例...所以,尝试按照这种方式我需要一个方法来获取名称/ ID /值(它不是重要的是,我可以使用所选复选框的正确ID填充属性。

    这里是进行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只是因为我正在做一些实验。

    所以,问题

    有:
    - 是否可以发送ajax请求发送表单的内容?怎么样?
    - 是否可以获取html页面所有选中复选框的名称/值/ id(其中一个)?怎么样?

    回答这两个问题中的一个,解决方案足以赢得我的个人崇拜:)

2 个答案:

答案 0 :(得分:0)

编辑:我认为您正在使用JQuery,请查看此处: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);

            }

答案 1 :(得分:0)

更新。解决。

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

感谢您的回答:)

更新(以下代码):

//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; ?>"/>

这就是全部。 :)