表单提交前用JS/JQuery构建Ajax所需JSON遇阻求助

看起来你核心的问题是搞错了目标JSON的结构——你把需要的属性拆成了数组元素，而不是构建一个单一的顶层对象，同时AJAX请求的参数传递方式也不符合JSON接口的要求。下面是完整的修正方案：

// 1. 构建person对象，直接映射表单字段
var person = { 
  firstName: $('#first_name').val(), 
  middleName: $('#middle_name').val(), 
  lastName: $('#last_name').val(), 
  emailId: $('#email').val(), 
  mobileNumber: $('#mobile_no').val(), 
  mobileCountryCode: $('#country_code').val() 
};

// 2. 构建informationSource数组，修复取值逻辑
var informationSource = [];
$.each($("#hear option:selected"), function() {
  // 重点：如果你的option的value属性存储的是id值，优先用val()而非text()
  // 这很可能是你出现undefined的原因——比如选项文本为空，或者选择器没匹配到元素
  var itemId = $(this).val() || $(this).text();
  informationSource.push({ id: itemId });
});

// 3. 构建完全匹配目标结构的请求对象
var requestData = {
  person: person,
  informationSource: informationSource,
  loginPassword: $('#password').val() // 直接作为顶层属性，不需要额外嵌套
};

console.log(requestData); // 现在这个结构和你需要的JSON完全一致

// 4. 修正AJAX请求配置
$.ajax({
  url: "api.php",
  type: "POST",
  contentType: "application/json", // 必须设置，告诉服务器接收的是JSON格式
  data: JSON.stringify(requestData), // 将JS对象转为JSON字符串
  beforeSend: function(xhr, settings) {
    xhr.setRequestHeader('Authorization', 'Bearer ' + acc_token);
  },
  success: function(response) {
    $('#res-div').css("display", "block");
    $('#signup-div').css("display", "none");
  },
  error: function(xhr, status, error) {
    // 建议添加错误处理，方便调试接口问题
    console.error("请求失败:", error);
  }
});

关键修正点说明： #

• 结构错误修复：你之前用array_data.push()把各个部分拆成了数组元素，但目标是一个包含三个顶层属性的对象，所以直接创建requestData来匹配结构即可，不需要数组。
• loginPassword层级修正：原来的代码把密码嵌套在了password对象里，导致结构多了一层，现在直接作为顶层属性，完全符合目标JSON要求。
• 消除undefined问题：如果informationSource出现undefined，大概率是因为你用text()获取id时，选项文本为空，或者选择器$("#hear")没找到对应的下拉框。换成val()（如果option的value是id）或者增加兜底逻辑，就能解决这个问题。
• AJAX请求优化：默认情况下jQuery会把对象转成form-urlencoded格式，必须设置contentType: "application/json"并通过JSON.stringify()转成字符串，服务器才能正确解析成你需要的JSON结构。

内容的提问来源于stack exchange，提问作者Amrish Khatri