使用JavaScript发送x-www-form-urlencoded POST请求遇未定义错误求助

嘿，这个错误其实很好排查——你在getAccessToken函数里调用了httpClient，但这个变量既没被声明，也没引入对应的依赖库，浏览器自然找不到它啦！结合你要发送x-www-form-urlencoded类型POST请求的需求，给你两个适配你现有环境的解决方案：

方案一：用你已加载的jQuery发送请求 #

既然你的代码里已经引入了jQuery（jquery-2.2.0.min.js），直接用$.ajax就能搞定，不用额外加其他库：

function getAccessToken() {
  // 替换成你实际要发送的表单参数
  const formParams = {
    username: 'your-account',
    password: 'your-pass',
    grant_type: 'password'
  };

  $.ajax({
    url: 'https://your-server-api/token', // 替换成你的服务器接口地址
    method: 'POST',
    contentType: 'application/x-www-form-urlencoded', // 关键：指定请求头类型
    data: formParams, // jQuery会自动把对象序列化成x-www-form-urlencoded格式
    success: function(res) {
      console.log('Token获取成功:', res);
      // 这里写成功后的业务逻辑
    },
    error: function(xhr, status, err) {
      console.error('请求出错:', err);
      // 处理错误情况
    }
  });
}

// 绑定按钮点击事件（对应你代码里的输入框触发逻辑）
$('input[type="button"]').on('click', function() {
  getAccessToken();
});

重点提醒： #

• contentType必须设置为application/x-www-form-urlencoded，这就是你要的请求头类型
• jQuery会自动把data里的对象转换成key1=value1&key2=value2的格式，不用手动拼接字符串
• 记得把接口地址和请求参数换成你实际需要的内容

方案二：原生JavaScript实现（不依赖jQuery） #

如果你不想用jQuery，用原生XMLHttpRequest也能轻松实现：

function getAccessToken() {
  const formData = new URLSearchParams();
  formData.append('username', 'your-account');
  formData.append('password', 'your-pass');
  formData.append('grant_type', 'password');

  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'https://your-server-api/token');
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      const response = JSON.parse(xhr.responseText);
      console.log('Token获取成功:', response);
    } else {
      console.error('请求失败，状态码:', xhr.status);
    }
  };

  xhr.onerror = function() {
    console.error('网络请求异常');
  };

  xhr.send(formData);
}

// 绑定点击事件
document.querySelector('input[type="button"]').addEventListener('click', getAccessToken);

额外排查小建议： #

如果你原本想用某个第三方HTTP客户端库（比如axios、Angular的HttpClient），一定要确保已经正确引入对应的脚本文件，并且变量名拼写正确（比如Angular的HttpClient需要依赖注入，不能直接全局调用）。

内容的提问来源于stack exchange，提问作者Κωστής Λίγγος