如何传递不在 URL 中的多个参数？

Posted 2023-05-09

【中文标题】如何传递不在 URL 中的多个参数？

【英文标题】：How to pass multiple parameters not in the URL?

【发布时间】：2018-08-06 19:49:36

【问题描述】：

目前表单数据通过 URL 传递，如下所示。

document.getElementById('newChildForm').action = "./populateImageProcessing?personId="+ temp+ "&category="+ strUser+ "&fromDate="+ frmDate+ "&toDate=" + toDate+"&advFromDayID="+advFromDayID+"&advFromMonthID="+advFromMonthID+"&advFromYearID="+advFromYearID+"&advToDayID="+advToDayID+"&advToMonthID="+advToMonthID+"&advToYearID="+advToYearID;

document.getElementById('newChildForm').submit();

我想单独传递表单数据，而不是通过 URL。

我用 ajax/jQuery 尝试了下面的方法

$.ajax(
        cache: false,
        url : "./populateImageProcessing",
        type : "POST",
        data : "personId=" + temp + "&category="
                    + strUser
                    + "&fromDate="+ frmDate+ "&toDate=" + toDate+ "&advFromDayID="+advFromDayID+"&advFromMonthID="+advFromMonthID+"&advFromYearID="+advFromYearID+"&advToDayID="+advToDayID
                    +"&advToMonthID="+advToMonthID+"&advToYearID="+advToYearID,
success: function(data)
$("#newChildForm").html(data); 

 ); 

jQuery 在 SIT 环境中工作，但由于 CSP，我在 UAT 环境中遇到了一些麻烦。

有没有什么办法可以使用纯javascriptdocument.getElementById('newChildForm').action="./populateImageProcessing"，并单独传递参数，而不是在URL中。

请帮忙。谢谢。

【问题讨论】：

CSP 与此有什么关系？如果您不想要 URL 中的参数，那么 POST 确实是唯一可行的选择；但我们甚至不知道您的服务器端组件是否想要接受 POST 数据。像在第一个代码 sn-p 中那样以如此丑陋的方式创建该 URL 的替代方法是用值填充隐藏的表单字段，然后提交表单。

【参考方案1】：

试试这个代码：

var data = "personId=" + temp + "&category="+ strUser+ "&fromDate="+ frmDate+ "&toDate=" + toDate+ "&advFromDayID="+advFromDayID+"&advFromMonthID="+advFromMonthID+"&advFromYearID="+advFromYearID+"&advToDayID="+advToDayID+"&advToMonthID="+advToMonthID+"&advToYearID="+advToYearID;

var xhttp= new XMLHttpRequest();

xhttp.open("POST", "populateImageProcessing", true);

xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhttp.onreadystatechange = function() 
        if (this.readyState == 4 && this.status == 200) 
            document.getElementById('newChildForm').innerHTML = this.responseText
       
    ;

xhttp.send(data); 

【讨论】：

我试过这个，但是数据不显示。我想也许我应该提交表格，所以我跟进了你的部分：document.getElementById('newChildForm').submit();它抛出 404 错误。但是，如果我单击浏览器后退按钮，则会显示结果。我希望在单击搜索按钮时显示结果。

我猜，问题出在 populateImageProcessing 文件中。

检查 populateImageProcessing 文件中的重定向，您确定没有文件类型（如 .php 或 .asp ）的 url 正确吗？

【参考方案2】：

你试过这样的吗？ Json 是传递多个参数的好方法。

var obj =  personId: temp, category: strUser, fromDate: frmDate, toDate: toDate, advFromDayID :advFromDayID, advFromMonthID: advFromMonthID, advFromYearID: advFromYearID, advToDayID: advToDayID, advToMonthID: advToMonthID, advToYearID: advToYearID ;
$.ajax(
    cache: false,
    url: "./populateImageProcessing",
    type: 'POST',
    data: JSON.stringify(obj),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(data)
        $("#newChildForm").html(data); 
    
);

但我不知道你是否可以在“服务器”端处理它？ 告诉我。希望对您有所帮助。

【讨论】：

谢谢。我希望避免使用 jQuery/Ajax。如果我可以提交表单，而不是在 URL 中传递参数，那将非常有帮助