Mithril.js发送AJAX POST请求时输入值为空问题求助

你踩的这个坑其实挺常见的——Mithril.js的m.request默认发送JSON格式的请求体，但CodeIgniter的$this->input->post()方法默认只解析application/x-www-form-urlencoded或multipart/form-data格式的表单数据，不会自动处理JSON请求，这就是后端拿到空值的核心原因。下面给你两种可行的解决思路：

思路一：修改Mithril请求，发送表单编码格式数据 #

让Mithril的请求和常规AJAX保持一致，发送表单编码的数据，这样后端不用做任何修改就能正常接收。有两种实现方式：

方式1：手动序列化数据并设置请求头 #

m.request({
  method: "POST",
  url: "http://localhost/index.php/login",
  data: { 
    username: $("#login-username").val(), 
    password: $("#login-password").val() 
  },
  // 手动将对象序列化为表单格式
  serialize: function(data) {
    return Object.keys(data).map(function(key) {
      return encodeURIComponent(key) + '=' + encodeURIComponent(data[key])
    }).join('&')
  },
  // 指定请求内容类型为表单编码
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}).then(function(result) { 
  console.log(result) 
})

方式2：使用Mithril内置的表单序列化函数 #

Mithril提供了m.serialize方法，可以直接序列化整个表单元素，代码更简洁可靠，还能避免手动取值的疏漏：

m.request({
  method: "POST",
  url: "http://localhost/index.php/login",
  // 直接序列化你的登录表单
  data: m.serialize(document.getElementById('login-form')),
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}).then(function(result) { 
  console.log(result) 
})

思路二：修改CodeIgniter后端，支持解析JSON请求 #

如果你的前后端计划长期用JSON格式交互，可以修改后端代码，手动解析JSON请求体：

public function login() {
  // 获取原始的JSON请求内容
  $rawInput = file_get_contents('php://input');
  // 解析为关联数组（第二个参数为TRUE返回数组而非对象）
  $requestData = json_decode($rawInput, TRUE);
  
  // 安全获取用户名（避免数组下标不存在报错）
  $username = isset($requestData['username']) ? $requestData['username'] : null;
  die($username);
}

验证小技巧 #

你可以打开浏览器开发者工具的「Network」标签，对比两种请求的差异：

• Mithril默认请求的Content-Type是application/json
• 常规AJAX请求的Content-Type是application/x-www-form-urlencoded
  这能直观确认问题的根源。

内容的提问来源于stack exchange，提问作者P. Nick