如何使用jQuery/JavaScript从请求载荷中获取表单数据

如果你想在前端用jQuery获取回调URL相关的表单数据，分两种常见场景处理：

场景1：主动发起请求并接收回调响应 #

如果是你通过jQuery提交表单，需要从回调URL的返回结果里拿数据，可以这样实现：

• 先阻止表单默认提交行为，用serialize()序列化表单数据发起异步请求：

$('form').on('submit', function(e) {
  e.preventDefault(); // 阻止页面跳转的默认提交行为
  $.ajax({
    url: '你的回调URL地址',
    method: 'POST',
    data: $(this).serialize(), // 把表单数据序列化为键值对格式
    success: function(response) {
      // response就是回调URL返回的数据，根据后端返回的格式处理
      // 比如后端返回JSON，直接读取对应字段即可
      console.log('回调返回的表单数据：', response);
    },
    error: function(err) {
      console.error('请求失败：', err);
    }
  });
});

场景2：从回调URL的地址参数中获取数据 #

如果回调URL是以GET方式返回页面，表单数据附带在URL参数里，可以用jQuery解析URL参数：

function getUrlParam(paramName) {
  var reg = new RegExp('(^|&)' + paramName + '=([^&]*)(&|$)');
  var paramMatch = window.location.search.substr(1).match(reg);
  if (paramMatch != null) return decodeURIComponent(paramMatch[2]);
  return null;
}

// 示例：如果回调URL是 http://xxx.com/callback?name=张三&age=25
var userName = getUrlParam('name');
var userAge = getUrlParam('age');
console.log(userName, userAge);

注意：前端无法直接像PHP的$_POST那样直接读取服务器接收到的原始POST数据——POST数据是发送到后端服务器的，前端只能通过发起请求后的响应拿到服务器返回的数据，或者在提交前自己序列化表单数据。

内容的提问来源于stack exchange，提问作者Kiran Bhagannavar