本文将详细介绍如何使用 JavaScript 从包含多个工作经历和教育经历模块的表单中收集数据，并将其以 JSON 格式发送到 ASP.NET MVC 服务器。我们将重点讲解如何遍历表单模块，提取数据，构建 JSON 对象，以及使用 AJAX 将数据发送到服务器端。
前端数据收集与处理
首先，我们需要使用 JavaScript 从 HTML 表单中收集数据。假设你的 HTML 结构中，工作经历和教育经历分别由 .work-experience-module 和 .education-module 类名的元素包裹。每个模块内部包含多个 input 元素，用于输入公司名称、职位、职责、开始日期、结束日期等信息。
以下是一个示例 JavaScript 代码片段，用于遍历这些模块并提取数据：
// 初始化数据对象
let data = {
WorkExperiences: [],
Educations: []
};
// Сбор данных из модулей опыта работы
$('.work-experience-module').each(function () {
let workExperience = {
companyName: $(this).find('input[name="company"]').val(),
position: $(this).find('input[name="position"]').val(),
responsibilities: $(this).find('input[name="responsibilities"]').val(),
workExperienceStartDate: $(this).find('input[name="workExperienceStartDate"]').val(),
workExperienceEndDate: $(this).find('input[name="workExperienceEndDate"]').val()
};
data.WorkExperiences.push(workExperience);
});
// Сбор данных из модулей образования
$('.education-module').each(function () {
let education = {
InstitutionName: $(this).find('input[name="educationInstitution"]').val(),
Degree: $(this).find('input[name="educationDegree"]').val(),
GraduationDate: $(this).find('input[name="educationGraduationDate"]').val()
};
data.Educations.push(education);
});
// 将数据转换为 JSON 字符串
let jsonData = JSON.stringify(data);
// 将 JSON 数据放入隐藏字段中
$('#resumeData').val(jsonData);
// 提交表单
$('form').submit();代码解释:
AOXO_CMS建站系统企业通用版1.0
下载
一个功能强大、性能卓越的企业建站系统。使用静态网页技术大大减轻了服务器负担、加快网页的显示速度、提高搜索引擎推广效果。本系统的特点自定义模块多样化、速度快、占用服务器资源小、扩展性强，能方便快捷地建立您的企业展示平台。简便高效的管理操作从用户使用的角度考虑，对功能的操作方便性进行了设计改造。使用户管理的工作量减小。网站互动数据可导出Word文档，邮件同步发送功能可将互动信息推送到指定邮箱，加快企业
立即学习“Java免费学习笔记（深入）”；
- 初始化数据对象: 创建一个 JavaScript 对象 data，包含两个数组 WorkExperiences 和 Educations，用于存储工作经历和教育经历的数据。
- 遍历工作经历模块: 使用 jQuery 的 .each() 方法遍历所有类名为 .work-experience-module 的元素。
- 提取工作经历数据: 在每个模块内部，使用 $(this).find() 方法查找对应的 input 元素，并使用 .val() 方法获取其值。将这些值存储在一个 workExperience 对象中。
- 添加到工作经历数组: 将 workExperience 对象添加到 data.WorkExperiences 数组中。
- 遍历教育经历模块: 与工作经历类似，遍历所有类名为 .education-module 的元素，提取教育经历数据，并存储在 data.Educations 数组中。
- 转换为 JSON 字符串: 使用 JSON.stringify() 方法将 JavaScript 对象 data 转换为 JSON 字符串。
- 放入隐藏字段: 将 JSON 字符串赋值给一个隐藏的 input 元素 (#resumeData) 的 value 属性。
- 提交表单: 提交包含隐藏字段的表单。
注意事项:
- 确保你的 HTML 结构与代码中的选择器(.work-experience-module, .education-module, input[name="company"] 等)匹配。
- 使用 jQuery 或其他 JavaScript 库来简化 DOM 操作。
- 对用户输入进行验证，以确保数据的完整性和安全性。
使用 AJAX 发送数据到服务器
除了将 JSON 数据放入隐藏字段并提交表单外，还可以使用 AJAX 直接将数据发送到服务器。 这种方式更加灵活，可以实现异步提交，避免页面刷新。
以下是使用 AJAX 发送数据的示例代码：
// 初始化数据对象
let data = {
WorkExperiences: [],
Educations: []
};
// Сбор данных из модулей опыта работы
$('.work-experience-module').each(function () {
let workExperience = {
companyName: $(this).find('input[name="company"]').val(),
position: $(this).find('input[name="position"]').val(),
responsibilities: $(this).find('input[name="responsibilities"]').val(),
workExperienceStartDate: $(this).find('input[name="workExperienceStartDate"]').val(),
workExperienceEndDate: $(this).find('input[name="workExperienceEndDate"]').val()
};
data.WorkExperiences.push(workExperience);
});
// Сбор данных из модулей образования
$('.education-module').each(function () {
let education = {
InstitutionName: $(this).find('input[name="educationInstitution"]').val(),
Degree: $(this).find('input[name="educationDegree"]').val(),
GraduationDate: $(this).find('input[name="educationGraduationDate"]').val()
};
data.Educations.push(education);
});
// 使用 AJAX 发送数据
$.ajax({
url: '/Resume/SaveResumeData', // 替换为你的 ASP.NET MVC 控制器 Action 地址
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(data),
dataType: 'json',
success: function (response) {
// 处理服务器返回的成功响应
console.log('数据发送成功', response);
alert('简历数据已成功保存！');
},
error: function (error) {
// 处理错误
console.error('数据发送失败', error);
alert('简历数据保存失败！');
}
});代码解释:
立即学习“Java免费学习笔记（深入）”；
- $.ajax() 函数: 使用 jQuery 的 $.ajax() 函数发送 AJAX 请求。
- url: 指定请求的 URL，替换为你的 ASP.NET MVC 控制器 Action 地址。
- type: 指定请求类型为 POST。
- contentType: 设置请求的 Content-Type 为 application/json; charset=utf-8，告诉服务器发送的是 JSON 数据。
- data: 将 JavaScript 对象 data 转换为 JSON 字符串，作为请求的主体发送到服务器。
- dataType: 指定期望服务器返回的数据类型为 json。
- success: 定义请求成功时的回调函数，处理服务器返回的响应。
- error: 定义请求失败时的回调函数，处理错误。
注意事项:
- 确保你已经引入了 jQuery 库。
- 替换 url 为你实际的 ASP.NET MVC 控制器 Action 地址。
- 根据服务器返回的数据格式，调整 dataType 和 success 回调函数中的处理逻辑。
- 添加适当的错误处理机制，以便在请求失败时能够通知用户。
ASP.NET MVC 后端处理
在 ASP.NET MVC 控制器中，你需要创建一个 Action 来接收并处理前端发送的 JSON 数据。
以下是一个示例 Action：
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using System.Collections.Generic;
public class ResumeController : Controller
{
[HttpPost]
public IActionResult SaveResumeData([FromBody] ResumeData data)
{
// 在这里处理接收到的简历数据
// 例如，保存到数据库或进行其他操作
// 可以使用 data.WorkExperiences 和 data.Educations 访问数据
foreach (var experience in data.WorkExperiences)
{
Console.WriteLine($"Company: {experience.CompanyName}, Position: {experience.Position}");
}
foreach (var education in data.Educations)
{
Console.WriteLine($"Institution: {education.InstitutionName}, Degree: {education.Degree}");
}
// 返回成功响应
return Json(new { success = true, message = "简历数据已成功保存！" });
}
}
public class ResumeData
{
public List WorkExperiences { get; set; }
public List Educations { get; set; }
}
public class WorkExperience
{
public string CompanyName { get; set; }
public string Position { get; set; }
public string Responsibilities { get; set; }
public string WorkExperienceStartDate { get; set; }
public string WorkExperienceEndDate { get; set; }
}
public class Education
{
public string InstitutionName { get; set; }
public string Degree { get; set; }
public string GraduationDate { get; set; }
} 代码解释:
立即学习“Java免费学习笔记（深入）”；
- [HttpPost] 特性: 指定该 Action 只能通过 HTTP POST 请求访问。
- [FromBody] 特性: 告诉 ASP.NET MVC 框架从请求的主体中读取 JSON 数据，并将其绑定到 ResumeData 对象。
- ResumeData 类: 定义一个 ResumeData 类，包含 WorkExperiences 和 Educations 两个属性，分别表示工作经历和教育经历的列表。
- WorkExperience 和 Education 类: 定义 WorkExperience 和 Education 类，分别表示单个工作经历和教育经历的数据结构。
- 数据处理: 在 Action 内部，你可以访问 data.WorkExperiences 和 data.Educations 属性，并对接收到的数据进行处理，例如保存到数据库或进行其他操作。
- 返回响应: 使用 Json() 方法返回一个 JSON 格式的响应，包含 success 和 message 字段，用于告知前端请求是否成功。
注意事项:
- 确保你已经安装了 Microsoft.AspNetCore.Mvc 和 Newtonsoft.Json NuGet 包。
- 根据你的实际需求，调整 ResumeData、WorkExperience 和 Education 类的属性。
- 添加适当的错误处理机制，以便在数据处理过程中发生错误时能够返回错误信息。
- 使用合适的 ORM 框架（例如 Entity Framework Core）来简化数据库操作。
总结
通过以上步骤，你可以构建一个完整的简历数据收集和提交流程，从前端表单收集数据，将其转换为 JSON 格式，然后使用 AJAX 或隐藏字段提交到 ASP.NET MVC 服务器进行处理。 务必注意数据验证和安全性，并根据实际需求进行调整和优化。
