如何使用 ajax 发布复杂的 url 请求答案

【问题标题】：How to post a complicated url request using ajax如何使用 ajax 发布复杂的 url 请求
【发布时间】：2019-10-31 06:49:46
【问题描述】：

我想使用这样的字符串向标签打印 API 做一个 ajax 发布，但似乎有语法错误或错误，请指点，谢谢。

这是一个用于打印标签的 Web API。

以下是 Asp.Net MVC5 视图页面中的 javascript 代码。

这样的网址：

var urlString = "http://localhost:3112/PrintService?REQUEST_DATA={
                               "PRINT_REQUEST": {
                                    "PRINT_NAME": "TSC TTP-345 (TEST)",
                                    "LABEL_QTY": 1,
                                    "TEMPLATE_PATH": "WD.LAB",
                                    "PRINT_DATA": [
                                                {
                                                    "storage": "",
                                                    "SPEC": "",
                                                    "ITEM": "",
                                                    "QTY": "500",
                                                    "DEMAND": "0",
                                                    "EXP_DATE1": "2021-05-21",
                                                    "EXP_DATE2": "2021-05-21",
                                                    "ALLERGENS": "",
                                                    "WD_DATE": "2019-10-29 23:59:59",
                                                    "WD_USER": "TEST",
                                                    "WD_USER_NAME": "TEST",
                                                    "TCI_LOTNO": "20190522",
                                                    "SHOP_ORDER": "",
                                                    "SHOP_ORDER_ITEM": "",
                                                    "SHOP_ORDER_DESC": "",
                                                    "SPLIT_SFC_COUNT": "",
                                                    "SUP_LOTNO": "",
                                                    "REPRINT": null,
                                                    "PACKCOUNT": "",
                                                    "SFC": "",
                                                    "WEIGHT": "",
                                                    "PCS": "",
                                                    "SKIN_WEIGHT": -500
                                                }
                                            ]
                                         }
                                     }";

像这样的ajax：

        $.ajax({
            type: "POST",
            url: urlString,
            data: {
            },
            dataType: 'html',
            success: function (ret) {
                labeldata = ret;
                window.alert("OK");
            },
            error: function (ret) { 
                window.alert(ret);
            }
        })

【问题讨论】：

为什么要将所有数据作为查询字符串传递？，而不是它，您可以创建一个模型并在控制器中传递整个模型。

标签： javascript c# ajax

【解决方案1】：

使用encodeURI():

var url = 'http://localhost:3112/PrintService?REQUEST_DATA={ "PRINT_REQUEST": { "PRINT_NAME": "TSC TTP-345 (TEST)", "LABEL_QTY": 1, "TEMPLATE_PATH": "WD.LAB", "PRINT_DATA": [ { "storage": "", "SPEC": "", "ITEM": "", "QTY": "500", "DEMAND": "0", "EXP_DATE1": "2021-05-21", "EXP_DATE2": "2021-05-21", "ALLERGENS": "", "WD_DATE": "2019-10-29 23:59:59", "WD_USER": "TEST", "WD_USER_NAME": "TEST", "TCI_LOTNO": "20190522", "SHOP_ORDER": "", "SHOP_ORDER_ITEM": "", "SHOP_ORDER_DESC": "", "SPLIT_SFC_COUNT": "", "SUP_LOTNO": "", "REPRINT": null, "PACKCOUNT": "", "SFC": "", "WEIGHT": "", "PCS": "", "SKIN_WEIGHT": -500 } ] } }';
url=encodeURI(url);
console.log(url);
$.ajax({
            type: "POST",
            url: url,
            data: {
            },
            dataType: 'html',
            success: function (ret) {
                labeldata = ret;
                window.alert("OK");
            },
            error: function (ret) { 
                window.alert(ret);
            }
        })

【讨论】：

谢谢，标签打印出来了，但是 ajax 进入错误部分并返回 ret 作为 [object Object] 警告，我还有什么需要注意的吗？但它仍然打印！谢谢！
删除 dataType:html 并在控制台中查看
对来自源“mes”的 url 的 XMLHttpRequest 的访问已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。看起来我应该在 ajax 中添加一些额外的标头信息？没听懂，谢谢。
是的，你应该在PrintService文件中添加标题Access-Control-Allow-Origin:*。

【解决方案2】：

你应该把这个没有URL的字符串放在数据部分，你不能这样使用它。

【讨论】：

感谢您的建议，我应该稍后尝试 Vishal modi 的模型设计答案。

【解决方案3】：

您可以创建一个模态，然后将其传递给控制器，如下所示。

var url = 'http://localhost:3112/PrintService';

var model = {
                               "PRINT_REQUEST": {
                                    "PRINT_NAME": "TSC TTP-345 (TEST)",
                                    "LABEL_QTY": 1,
                                    "TEMPLATE_PATH": "WD.LAB",
                                    "PRINT_DATA": [
                                                {
                                                    "storage": "",
                                                    "SPEC": "",
                                                    "ITEM": "",
                                                    "QTY": "500",
                                                    "DEMAND": "0",
                                                    "EXP_DATE1": "2021-05-21",
                                                    "EXP_DATE2": "2021-05-21",
                                                    "ALLERGENS": "",
                                                    "WD_DATE": "2019-10-29 23:59:59",
                                                    "WD_USER": "TEST",
                                                    "WD_USER_NAME": "TEST",
                                                    "TCI_LOTNO": "20190522",
                                                    "SHOP_ORDER": "",
                                                    "SHOP_ORDER_ITEM": "",
                                                    "SHOP_ORDER_DESC": "",
                                                    "SPLIT_SFC_COUNT": "",
                                                    "SUP_LOTNO": "",
                                                    "REPRINT": null,
                                                    "PACKCOUNT": "",
                                                    "SFC": "",
                                                    "WEIGHT": "",
                                                    "PCS": "",
                                                    "SKIN_WEIGHT": -500
                                                }
                                           ]
                                         }
                                      };

  $.ajax({
        type: "POST",
        url: url,
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(model),
        dataType: 'html',
        success: function (ret) {
            labeldata = ret;
            window.alert("OK");
        },
        error: function (ret) {
            window.alert(ret);
        }
    })

在控制器端你可以像下面这样传递模型。

public class PRINTDATA
{
    public string storage { get; set; }
    public string SPEC { get; set; }
    public string ITEM { get; set; }
    public string QTY { get; set; }
    public string DEMAND { get; set; }
    public string EXP_DATE1 { get; set; }
    public string EXP_DATE2 { get; set; }
    public string ALLERGENS { get; set; }
    public string WD_DATE { get; set; }
    public string WD_USER { get; set; }
    public string WD_USER_NAME { get; set; }
    public string TCI_LOTNO { get; set; }
    public string SHOP_ORDER { get; set; }
    public string SHOP_ORDER_ITEM { get; set; }
    public string SHOP_ORDER_DESC { get; set; }
    public string SPLIT_SFC_COUNT { get; set; }
    public string SUP_LOTNO { get; set; }
    public object REPRINT { get; set; }
    public string PACKCOUNT { get; set; }
    public string SFC { get; set; }
    public string WEIGHT { get; set; }
    public string PCS { get; set; }
    public int SKIN_WEIGHT { get; set; }
}

public class PRINTREQUEST
{
    public string PRINT_NAME { get; set; }
    public int LABEL_QTY { get; set; }
    public string TEMPLATE_PATH { get; set; }
    public List<PRINTDATA> PRINT_DATA { get; set; }
}

public class Model
{
    public PRINTREQUEST PRINT_REQUEST { get; set; }
}

【讨论】：

我注意到我的 urlString 在问号后面有一个名为“REQUEST_DATA”的参数，所以我可以在你的模型设计答案中忽略这个“REQUEST_DATA”吗？谢谢。
是的，现在您正在发布整个模型。所以你不需要它。
感谢您对 MVC 概念的回答，它清晰而有帮助。