用ajax发送参数

Posted

技术标签:

【中文标题】用ajax发送参数【英文标题】:sending parameters with ajax 【发布时间】:2011-02-23 04:28:33 【问题描述】:

我正在尝试使用 ajax 将从我的 jsp 中的表中获取的参数发送到其他 JSP。 我正在使用 followinf 函数将所有值发送到 JSP:ajaxForm 但我不知道为什么每次运行时发送失败:

这里是javascript函数:

function editarow() 
    var xhr = getXhr();
    xhr.onreadystatechange = function() 
        if (xhr.readyState == 4 && xhr.status == 200) 
            selects = xhr.responseText;
            // On se sert de innerhtml pour rajouter les options a la liste
            document.getElementById('prjsel').innerHTML = selects;
        
    ;

    var row, firstNameCell, lastNameCell;
    var table = document.getElementById("sheet");
    var buttons = table.getElementsByTagName("button");
    for (var i = 0; i < buttons.length; i++) 
        if (buttons[i].name == "edit") 
            buttons[i].onclick = function() 
                row = this.parentNode.parentNode;

                // The first name cell is the first child
                NameCell1 = findElement(row.firstChild);
                NameCell2 = findElement(NameCell1.nextSibling);
                NameCell3 = findElement(NameCell2.nextSibling);
                NameCell4 = findElement(NameCell3.nextSibling);
                NameCell5 = findElement(NameCell4.nextSibling);
                NameCell6 = findElement(NameCell5.nextSibling);
                NameCell7 = findElement(NameCell6.nextSibling);

                // `innerHTML` pour obtenir la valeur
                /*alert("name 1  is " + NameCell1.innerHTML);
                alert("name 2  is " + NameCell2.innerHTML);
                alert("name 3  is " + NameCell3.innerHTML);
                alert("name 4  is " + NameCell4.innerHTML);
                alert("name 5  is " + NameCell5.innerHTML);
                alert("name 6  is " + NameCell6.innerHTML);
                alert("name 7 is " + NameCell7.innerHTML);*/

            
        
    

    xhr.open("POST", "ajaxForm.jsp", true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send("NameCell1="+NameCell1,"NameCell2="+NameCell2,"NameCell3="+NameCell3,"NameCell4="+NameCell4,"NameCell5="+NameCell5,"NameCell6="+NameCell6,"NameCell7="+NameCell7 );

从表中获取值后,我想将它们全部发送到ajaxForm.jsp

【问题讨论】:

【参考方案1】:

从最后一行开始:

xhr.send("NameCell1="+NameCell1,"NameCell2="+NameCell2,"NameCell3="+NameCell3,"NameCell4="+NameCell4,"NameCell5="+NameCell5,"NameCell6="+NameCell6,"NameCell7="+NameCell7 );

这不是在 JavaScript 中连接字符串的方法。

由于您使用的是 JSP,因此您也应该了解 Java。您应该像在 Java 中那样在 JavaScript 中连接字符串:

xhr.send("NameCell1=" + NameCell1 + ",NameCell2=" + NameCell2 + "etc...");

也就是说,这应该在 JavaScript 控制台中出错。你有注意这个吗?无论如何,为了更好的 JavaScript 调试,我建议你使用Firebug,为了减少冗长/不透明和更多兼容跨浏览器的 Ajax 处理和 HTML DOM 遍历,我强烈建议你看看jQuery。使用 jQuery 和 Ajax Form Plugin,您只需以下几行即可:

$(document).ready(function() 
    $('#formId').ajaxForm(function(response) 
        $('#prjsel').html(response);
    );
);

这样您就不必担心浏览器的具体细节以及如何正确发送请求。

【讨论】:

【参考方案2】:

send 方法只接受一个参数。您无法转换数据,因此它是 application/x-www-form-urlencoded 字符串。

即一组键和值(其中键和值都使用 encodeURIComponent 处理,并用 & 分隔。

【讨论】:

以上是关于用ajax发送参数的主要内容,如果未能解决你的问题,请参考以下文章

将空参数从 Ajax 发送到控制器

Ajax通过url发送参数

使用 jQuery AJAX 发送多个数据参数

从ajax发送时动作参数获取值为null是可以的

如何使用 jQuery $.ajax 将请求参数数组发送到 servlet?

Laravel Datatables ajax无法发送参数进行查询