js传各种类型参数到Controller层的整理方式

下面我分享一下“js传各种类型参数到Controller层的整理方式”的攻略。

在前端页面调用Controller层时，我们需要将页面中的数据传给Controller层进行后台处理，这时需要注意参数的类型和格式。一般来说，前端页面向后端Controller层参数传递有以下几种方式：GET方式，POST方式，以及使用Ajax进行传递。不同的传递方式，参数的整理方式也不同。下面我会分别详细讲解这三种传递方式。

GET方式

在使用GET方式传递参数时，参数值会直接附加到URL末尾，类似于如下格式：

http://example.com/App/Controller?id=1&name=小明

这种方式传递的参数一般用于查询、过滤操作。

当传递的参数是一个简单的字符串或数字等基本类型时，我们只需要在请求URL中携带参数名称以及对应的参数值即可，例如上述URL中的id和name参数。

当传递的参数是一个对象时，我们需要将对象中的属性转换成键值对，然后再将键值对拼成参数串放在URL之后。示例如下：

// js代码
let obj = {id: 1, name: "小明"};
let params = Object.keys(obj).map(k => encodeURIComponent(k) + '=' + encodeURIComponent(obj[k])).join('&');
let url = 'http://example.com/App/Controller?' + params;

上述代码中，使用Object.keys方法将对象的属性名取出，通过encodeURIComponent方法对属性名和属性值进行编码，然后将编码后的参数串用&连接起来，拼接到URL中即可。

POST方式

POST方式一般用于提交表单数据，参数值不会直接附加到URL上，而是放在请求的消息体中。在使用POST方式传递参数时，需要设置请求头的Content-Type为application/x-www-form-urlencoded，并将参数放在请求体中。

当传递的参数是一个简单的字符串或数字等基本类型时，我们只需要在请求体中携带参数名称以及对应的参数值即可，例如：

// js代码
let xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/App/Controller');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
  if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
    console.log('请求成功');
  }
};
xhr.send('id=1&name=小明');

当传递的参数是一个对象时，我们可以使用FormData对象来将对象转成键值对形式传递。示例如下：

// js代码
let formData = new FormData();
formData.append('id', 1);
formData.append('name', '小明');
let xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/App/Controller');
xhr.onreadystatechange = function () {
  if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
    console.log('请求成功');
  }
};
xhr.send(formData);

使用Ajax进行传递

Ajax可以通过data参数将参数以对象的方式传递给后台，如下所示：

$.ajax({
  url: 'http://example.com/App/Controller',
  type: 'POST',
  data: {id: 1, name: '小明'},
  success: function(data) {
    console.log(data);
  }
});

当需要传递的参数比较复杂时，我们也可以使用JSON.stringify方法将数据转成字符串，然后放在请求的消息体中，如下所示：

// js代码
let data = {
  name: '小明',
  age: 20,
  hobby: ['篮球', '足球']
};
$.ajax({
  url: 'http://example.com/App/Controller',
  type: 'POST',
  contentType: "application/json",
  dataType: "json",
  data: JSON.stringify(data),
  success: function(data) {
    console.log(data);
  }
});

上述代码中，设置请求头中的Content-Type为application/json，表示请求体中使用的是JSON格式的参数，然后使用JSON.stringify方法将data对象转成字符串，发送时放在请求体中。

以上就是“js传各种类型参数到Controller层的整理方式”的攻略，希望对你有所帮助。