AJAX POST 将数字作为字符串发送

Question

出于某种原因，我的 AJAX POST 请求正在将我的 numeric 数据作为 string 发送到我的服务器...这是我的数据和 AJAX请求：

var data = {
        projectId: $("#projectId").val(),
        startDate: $("#startDate").val(),
        endDate: $("#endDate").val(),
        num_auto_tests: Number($("#num_auto_tests").val()),
        num_manual_tests: Number($("#num_manual_tests").val()),
        num_passed_tests: Number($("#num_passed_tests").val()),
        num_failed_tests: Number($("#num_failed_tests").val()),
        num_unran_tests: Number($("#num_unran_tests").val()),
        test: 3
    };

AJAX查询：

$.ajax({
        type: "POST",
        dataType: "json",
        url: "/addreport/+ data.projectId",
        data: data,
        success: function() {
            console.log('success');
        }
    });

console.log(typeof(data.num_auto_tests)); //returns `number`

服务器端returns:

{ projectId: 'FDIC-88445',
  startDate: '',
  endDate: '',
  num_auto_tests: '3',
  num_manual_tests: '3',
  num_passed_tests: '3',
  num_failed_tests: '3',
  num_unran_tests: '3',
  test: '3' }

如你所见，应该是数字的值都是服务器端的字符串...

有人知道这是怎么回事吗？

提前致谢！

Answer 1

你的服务器收到HTTP协议中的post，难怪你的server-side收到一个字符串，因为你正在执行的操作不是type-secure。这实际上是预期的行为，如果您希望元素变成数字，然后将参数转换为数字，确切的方法取决于您使用的 server-side language/framework。

编辑：您可以做两件事来解决您的问题：

您可以创建一个数字 handler/converter，像这样：

function detectNumeric(obj) { for (var index in obj) { if (!isNaN(obj[index])) { obj[index] = Number(obj[index]); } else if (typeof obj === "object") { detectNumeric(obj[index]); } } }

并为您想要以这种方式处理的任何对象调用此函数，或者

将参数作为 JSON 传递并在服务器上解码。

var my_object = {

  position: 1,
  id: "500",
  text: "hello world",
  greeting: "100, good day to you",
  book: "nineteen eighty four"

};


// iterates over an object's properties 
// and converts numbers as strings to numbers
function detectNumeric(obj) {
  for (var index in obj) {
    // if object property value *is* a number, like 1 or "500"
    if (!isNaN(obj[index])) {
      // convert it to 1 or 500
      obj[index] = Number(obj[index]);
    }
    // to do: explain what this does
    // else if (typeof obj === "object") {
    //  detectNumeric(obj[index]);
    // }
  }

  console.log(my_object)
}

// call function
detectNumeric(my_object);

Answer 2

我相信 POST 请求的默认内容类型是 url-encode 它。这实质上将所有内容都变成了一个字符串值，并按原样进行检索。根据您使用的服务器端架构，可以使用不同的内容类型（或随后手动支持），例如使用可以保留您的对象结构和类型的内容类型 application/json。

Answer 3

我用 JSON.stringify 解决了这个问题。 PFB 我的 ajax 电话：

var settings = {
  "url": "http://localhost:12345/docker/scale",
  "type": "POST",
  "headers": {
    "Content-Type": "application/json"
  },
  "data": JSON.stringify({ "scale": { "desired-instances": 123 } })
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

通过这样做，此值仅作为整数传递，因此 server-side 代码中不需要更改。

Answer 4

这是我的解码器，可以处理多维arrays/objects

//running the object through tests
function tryParsingType(unknownObj) {
    if (unknownObj.constructor.name === "String" && !isNaN(parseFloat(unknownObj)))
        return parseFloat(unknownObj);
    else if (unknownObj.constructor.name === "String" && (unknownObj === "true" || unknownObj === "false"))
        return unknownObj === "true";
    else if (unknownObj.constructor.name === "Array" || unknownObj.constructor.name === "Object")
        tryParsingTypes(unknownObj);
    return unknownObj;
}

//works for generic objects and arrays
function tryParsingTypes(genericObj) {
    var type = genericObj.constructor.name;
    if (!(type === "Array" || type === "Object"))
        return;
    var keys = Object.keys(genericObj);
    for (var i = 0; i < keys.length; i++) {
        var object = genericObj[keys[i]];
        genericObj[keys[i]] = tryParsingType(object);
    }
}

//example code below
var testObj = {
    "key5": "-1",
    "key6": "-132.3123",
    "key7": "3421",
    "key10": "true",
    "key11": "false",
    "key12": 'true',
    "key13": 'false',
    "key14": {
        "key1": {
            "key1": "true",
            "key2": {
                "key1337": "-432.2342",
                "key321": {
                    "key1": "-1231.2",
                    "key2": "false"
                }
            }
        },
        "key2": ["true", "false"],
        "key3": 2.5,
        "key4": "3",
        "key5": "40",
        "key6": "40.99441"
    },
    "key15": [1, 2, 2.5, "3", "40", "40.99441"]
};
var testArr = [1, 2, 3, 4, 5, "6", "7", "8", "9", "10", true, false, "true", "false", {
        "key1": 1,
        "key2": 2,
        "key3": 2.5,
        "key4": "3",
        "key5": "40",
        "key6": "40.99441"
    }, [1, 2, 2.5, "3", "40", "40.99441", ["1", "2"]]];

tryParsingTypes(testObj);
tryParsingTypes(testArr);

console.log({
    "testObj": testObj,
    "testArr": testArr
});

Answer 5

在我的例子中，由于服务器处理数据的方式，我不得不将 contentType 更改为 application/json 而不是 json。

AJAX POST 将数字作为字符串发送

AJAX POST sends numbers as string

javascript

string

ajax

numbers