本文旨在指导开发者如何利用JavaScript从表单中收集简历数据，包括工作经历和教育背景等信息，并将这些数据以JSON格式发送到ASP.NET MVC服务器端进行处理。我们将详细介绍数据收集、格式化以及AJAX提交的关键步骤，并提供示例代码以供参考。
前端数据收集与格式化
在前端，我们需要使用JavaScript从表单的各个模块中收集数据。考虑到用户可以添加多个工作经历和教育背景，我们需要动态地收集这些信息，并将它们组织成一个易于传输和处理的JSON对象。
1. HTML结构
首先，假设我们的HTML结构包含多个 .work-experience-module 和 .education-module，每个模块都包含相应的输入字段。 例如：
立即学习“Java免费学习笔记（深入）”；
<div class="work-experience-module">
<input type="text" name="company" placeholder="公司名称">
<input type="text" name="position" placeholder="职位">
<input type="text" name="responsibilities" placeholder="职责">
<input type="date" name="workExperienceStartDate" placeholder="开始时间">
<input type="date" name="workExperienceEndDate" placeholder="结束时间">
</div>
<div class="education-module">
<input type="text" name="educationInstitution" placeholder="学校名称">
<input type="text" name="educationDegree" placeholder="学位">
<input type="date" name="educationGraduationDate" placeholder="毕业时间">
</div>2. JavaScript数据收集
接下来，使用JavaScript遍历这些模块，收集数据并将其存储在一个对象中。
function collectResumeData() {
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);
});
return data;
}这段代码使用 jQuery 的 .each() 方法遍历每个工作经历和教育背景模块。 对于每个模块，它从输入字段中提取值，并创建一个包含这些值的对象。 然后，将这些对象添加到 data.WorkExperiences 和 data.Educations 数组中。
3. JSON 序列化
在将数据发送到服务器之前，需要将JavaScript对象序列化为JSON字符串。
let resumeData = collectResumeData(); let jsonData = JSON.stringify(resumeData);
后端数据接收与处理 (ASP.NET MVC)
在ASP.NET MVC中，我们需要创建一个Action来接收和处理这些数据。
1. 创建Model
首先，定义与JSON数据结构相对应的C# Model。
public class ResumeData
{
public List<WorkExperience> WorkExperiences { get; set; }
public List<Education> Educations { get; set; }
}
public class WorkExperience
{
public string CompanyName { get; set; }
public string Position { get; set; }
public string Responsibilities { get; set; }
public DateTime WorkExperienceStartDate { get; set; }
public DateTime WorkExperienceEndDate { get; set; }
}
public class Education
{
public string InstitutionName { get; set; }
public string Degree { get; set; }
public DateTime GraduationDate { get; set; }
}2. 创建Controller Action
然后，创建一个Controller Action来接收JSON数据并进行处理。
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json; // 引入 Newtonsoft.Json
public class ResumeController : Controller
{
[HttpPost]
public IActionResult SubmitResume([FromBody] ResumeData resumeData)
{
if (ModelState.IsValid)
{
// 在这里处理 resumeData，例如保存到数据库
// 可以使用 Newtonsoft.Json 反序列化 JSON 字符串，如果前端直接传递 JSON 字符串
// ResumeData resumeData = JsonConvert.DeserializeObject<ResumeData>(jsonString);
// 返回成功状态
return Ok("Resume submitted successfully!");
}
else
{
// 返回错误状态和错误信息
return BadRequest(ModelState);
}
}
}在这个Action中，[FromBody] 特性告诉ASP.NET MVC从请求的主体中读取JSON数据，并将其反序列化为 ResumeData 对象。 ModelState.IsValid 检查Model的验证规则是否通过。 如果数据有效，可以将其保存到数据库或执行其他操作。 如果数据无效，则返回一个 BadRequest 响应，其中包含错误信息。
3. 配置路由
确保你的路由配置允许通过POST请求访问这个Action。 可以在 Startup.cs 文件中配置路由：
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});AJAX提交数据
现在，我们需要使用AJAX将JSON数据发送到服务器。
$(document).ready(function () {
$('#submitButton').click(function () { // 假设你有一个id为submitButton的按钮
let resumeData = collectResumeData();
let jsonData = JSON.stringify(resumeData);
$.ajax({
url: '/Resume/SubmitResume', // 替换为你的Controller和Action的URL
type: 'POST',
contentType: 'application/json',
data: jsonData,
success: function (response) {
alert(response); // 显示服务器返回的消息
},
error: function (error) {
console.error('Error submitting resume:', error);
alert('Error submitting resume. Please check the console for details.');
}
});
});
});这段代码使用 jQuery 的 $.ajax() 方法发送POST请求。 url 指定服务器端点，type 指定请求类型，contentType 指定请求的内容类型为 application/json，data 包含要发送的JSON数据。 success 和 error 回调函数处理服务器的响应。
注意事项：
- 确保引入了 jQuery 库。
- 替换 /Resume/SubmitResume 为你实际的Controller和Action的URL。
- 在ASP.NET MVC项目中，需要安装 Microsoft.AspNetCore.Mvc.NewtonsoftJson 包来处理JSON数据。 并在 Startup.cs 中配置：
services.AddControllers().AddNewtonsoftJson();
总结
通过以上步骤，我们成功地实现了从前端收集简历数据，将其格式化为JSON，并通过AJAX发送到ASP.NET MVC服务器端进行处理。 这种方法允许用户动态地添加和编辑工作经历和教育背景等信息，并将其方便地提交到服务器进行存储和处理。 务必注意数据验证和安全性，以确保应用程序的稳定性和安全性。
