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

时间:2022-12-01 16:12:48

I've an html page wich contains a table, some rows and inside any row i checkbox. When i select a checkbox i will to delete the message BUT only when i click a red-button-of-death.

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

Example
table
   tr(unique_id)
      td [checkbox]
      td Content
      td Other content
[... and so on]
/table
[red-button-of-death]

示例表tr(unique_id)td [checkbox] td内容td其他内容[...等等] / table [red-button-of-death]

Now, the delete of multi rows must be without the reload of the page so i set up an ajax function that work like this:

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

  1. setup ajax object.
  2. 设置ajax对象。
  3. set the open method (post/get, url, true)...
  4. 设置open方法(post / get,url,true)...
  5. wait for the response of the "url" page.... take a coffe, have a break.
  6. 等待“网址”页面的响应....拿一杯咖啡,休息一下。
  7. got response, using jquery delete the row using the unique id of the rows.
  8. 得到响应,使用jquery使用行的唯一ID删除行。
  9. jquery: popup a feedback for the action just done
  10. jquery:弹出刚才完成的动作的反馈
  11. jquery: update some counter around the page
  12. jquery:在页面周围更新一些计数器

So, i begin tryin to delete a single record and everything go fine, i has created a link on every rows that call the function to delete "single record" passing the id of the item.

所以,我开始尝试删除单个记录,一切顺利,我已经在每个调用函数的行上创建了一个链接,以删除传递项目ID的“单个记录”。

But now i've to develop the multi-delete-of-doom. the first thing that i've think was "i can envelop the table in a 'form' and send everything with the 'post' method". That seems to be brilliant and easy....
but doesn't work :-|

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

Googling around i've found some example that seems to suggest to set a variable that contains the item to send... so, trying to follow this way i need a method to get the name/id/value (it's not important, i can populate an attribute with the correct id) of the selected checkbox.

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

Here the function that make the ajax call and all the rest

这里是进行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);
}

Actually the variable 'param' is set to null just because i'm doing some experimentation.

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

So, the questions

are:
- Is it possible to make an ajax request sending the content of the form? How?
- Is it possible to get the name/value/id (one of these) of all the selected checkbox of an html page? How?

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

Answer to one of these two question with the solution is enough to win my personal worship :)

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

2 个解决方案

#1


0  

Edit: I think you are using JQuery so look here: http://api.jquery.com/category/ajax/

编辑:我认为你正在使用JQuery所以请看这里:http://api.jquery.com/category/ajax/

You should be using a javascript frame work such as dojo or jquery to handle Ajax. Writing you own ajax functions from scratch is not recommended.

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

Some frameworks:

一些框架:

A jquery example (are you already using this framework?):

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

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

A Dojo Example:

一个Dojo示例:

Submitting a form using POST and Ajax:

使用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);

            }

#2


0  

Update. Solved.

更新。解决了。

I've used the builtin function of jquery to manage the form sumbit using the $jQuery.post() function and the $(#idform).serialize() function. It's really late now but tomorrow i'll try to remember to paste here the correct code :)

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

Thanks for the answer anyway :)

谢谢你的答案:)

Update (code below):

更新(以下代码):

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

The structure of the selectbox was something like:

selectbox的结构如下:

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

That's all. :)

就这样。 :)

#1


0  

Edit: I think you are using JQuery so look here: http://api.jquery.com/category/ajax/

编辑:我认为你正在使用JQuery所以请看这里:http://api.jquery.com/category/ajax/

You should be using a javascript frame work such as dojo or jquery to handle Ajax. Writing you own ajax functions from scratch is not recommended.

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

Some frameworks:

一些框架:

A jquery example (are you already using this framework?):

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

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

A Dojo Example:

一个Dojo示例:

Submitting a form using POST and Ajax:

使用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);

            }

#2


0  

Update. Solved.

更新。解决了。

I've used the builtin function of jquery to manage the form sumbit using the $jQuery.post() function and the $(#idform).serialize() function. It's really late now but tomorrow i'll try to remember to paste here the correct code :)

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

Thanks for the answer anyway :)

谢谢你的答案:)

Update (code below):

更新(以下代码):

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

The structure of the selectbox was something like:

selectbox的结构如下:

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

That's all. :)

就这样。 :)