使用 javascript 在 ajax 请求中发送多个参数

Send multiple parameter in ajax request using javascript

本文关键字：参数 javascript ajax 请求 使用      更新时间：2023-09-26

所以我想使用ajax请求，我知道如何使用它。

但是我遇到的问题是我想将参数传递给请求。所以我的第一页有 4 个参数，然后我像这样构建 url，

var url = "./ControllerServlet?PAGE_ID=BPCLA&ACTION=closeAssessment&SAVE_FLAG=true&closeReason="+closeReasonStr+"&closeCmt="+closeCmt;

但现在参数正在增加，就像现在我还有 20 个一样。所以现在像这样构建网址将是混乱的方法。有没有更好的方法可以做到这一点。

这是我的函数，我在javascript函数中构建URL。

function closeAssessment() {
            var closeReason = document.getElementById("SectionClousureReason");
            var closeReasonStr = closeReason.options[closeReason.selectedIndex].value;
            var closeCmt=document.getElementById("SectionCloseAssessmentCmt").value;
                var url = "./ControllerServlet?PAGE_ID=BPCLA&ACTION=closeAssessment&SAVE_FLAG=true&closeReason="+closeReasonStr+"&closeCmt="+closeCmt;
                ajaxRequest(url);
                return;
    }

编辑：

正如你问的，这是我的ajaxRequest函数，

function ajaxRequest(url) {
        strURL = url;
        var xmlHttpRequest = false;
        var self = this;
        // Mozilla, Safari
        if (window.XMLHttpRequest) {
            self.xmlHttpRequest = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // IE
            self.xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        self.xmlHttpRequest.open("POST", strURL, true);
        self.xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        self.xmlHttpRequest.onreadystatechange = function() {
            if (self.xmlHttpRequest.readyState == 4) {
                if (self.xmlHttpRequest.status == 200) {
                    var htmlString = self.xmlHttpRequest.responseText;
                    var parser = new DOMParser();
                    var responseDoc = parser.parseFromString(htmlString, "text/html");
                    window.close();
                } else {
                    ajaxFailedCount++;
                    // Try for 1 min (temp fix for racing condition)
                    if (ajaxFailedCount < 1200) {window.setTimeout(function() {ajaxRequest(url)}, 50);}
                    else {alert("Refresh failed!")};
                }
            }
        }
        self.xmlHttpRequest.send(null);
    }

您可以创建一个对象，其中键/值对是您想要添加到 URL 的内容。

var closeReason = document.getElementById("SectionClousureReason");
var params = {
    PAGE_ID: 'BPCLA',
    ACTION: 'closeAssessment',
    SAVE_FLAG: 'true',
    closeReasonStr: closeReason.options[closeReason.selectedIndex].value,
    closeCmt: document.getElementById("SectionCloseAssessmentCmt").value
};

然后通过循环将它们添加到 URL。

var url = "./ControllerServlet?";
var urlParams = Object.keys(params).map(function(key){
    return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
}).join('&');
url += urlParams;
ajaxRequest(url);

注意：我添加encodeURIComponent只是为了安全起见。

编辑：从您的评论来看，您似乎想提交<form>但您想使用 AJAX 来这样做。 在这种情况下，您可以循环访问表单元素并构建上述params对象。

var params = {
    PAGE_ID: 'BPCLA',
    ACTION: 'closeAssessment',
    SAVE_FLAG: 'true'
};
var form = document.getElementById('yourForm'),
    elem = form.elements;
for(var i = 0, len = elem.length; i < len; i++){
    var x = elem[i];
    params[x.name] = x.value;
}

构建参数的对象，并通过如下所示的循环将它们放入 uri 中：

var values= {
    page_id: 'BPCLA',
    action:  'test'
},
uri_params = [],
uri = 'http://yoururl.com/file.php?';
for (var param in values) uri_params.push( encodeURIComponent( param ) + '=' + encodeURIComponent( values[ param ] ) );
uri = uri + uri_params.join( '&' );
console.log( uri );

或者考虑使用 POST 传输参数，因为许多浏览器对查询字符串都有限制。

编辑：您还可以为自己构建一个函数，该函数遍历表单并为您构建values对象，因此您不必手动执行此操作。但请注意，任何人都可以通过在提交表单之前附加表单元素（例如使用开发人员工具）来简单地注入自定义 url 参数，因此请记住这一点。

如果你使用的是jQuery，你可以使用.serializeArray（）或者看看这个答案，了解你可以使用的可能函数。

相关文章：