本文档旨在指导开发者如何使用JavaScript从包含多个工作经历和教育经历模块的表单中收集简历数据，并将其发送到ASP.NET MVC服务器。我们将详细介绍如何遍历表单模块，提取数据，并将数据格式化后通过隐藏字段提交到服务器。
从表单收集简历数据
在构建简历表单时，通常会允许用户添加多个工作经历和教育经历模块。每个模块都包含一组相关的输入字段。以下是如何使用JavaScript遍历这些模块并收集数据：
- HTML 结构:
假设你的HTML结构如下所示，其中 .work-experience-module 和 .education-module 分别代表工作经历和教育经历的模块：
<form id="resumeForm" action="/Resume/Submit" method="post">
<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>
<input type="hidden" id="resumeData" name="resumeData">
<button type="submit">提交</button>
</form>- JavaScript 代码:
使用JavaScript来遍历这些模块，提取数据，并将其存储在JavaScript对象中。
立即学习“Java免费学习笔记（深入）”；
$(document).ready(function() {
$('#resumeForm').submit(function(event) {
event.preventDefault(); // 阻止默认的表单提交
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);
// 提交表单
this.submit();
});
});代码解释:
- $(document).ready(function() { ... }); 确保在文档加载完成后执行JavaScript代码。
- $('#resumeForm').submit(function(event) { ... }); 监听表单的提交事件。
- event.preventDefault(); 阻止表单的默认提交行为，以便我们可以使用JavaScript来处理数据。
- data 对象用于存储从表单中提取的数据。
- $('.work-experience-module').each(function() { ... }); 和 $(.education-module).each(function() { ... }); 使用 jQuery 的 each() 方法遍历所有工作经历和教育经历模块。
- 在每个模块中，使用 $(this).find('input[name="..."]').val() 来获取输入字段的值。
- 将提取的数据添加到 data.WorkExperiences 和 data.Educations 数组中。
- JSON.stringify(data) 将JavaScript对象转换为JSON字符串。
- $('#resumeData').val(jsonData); 将JSON字符串放入隐藏字段 resumeData 中。
- this.submit(); 再次提交表单，这次提交的是包含JSON数据的隐藏字段。
将数据发送到ASP.NET MVC服务器
将JSON数据存储在隐藏字段中后，就可以将其提交到ASP.NET MVC服务器。
- ASP.NET MVC Controller:
在ASP.NET MVC Controller中，创建一个Action来接收和处理JSON数据。
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using System.Collections.Generic;
public class ResumeController : Controller
{
public IActionResult Submit(string resumeData)
{
// 反序列化JSON数据
ResumeData data = JsonConvert.DeserializeObject<ResumeData>(resumeData);
// 处理简历数据，例如保存到数据库
// 返回结果
return View();
}
}
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 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; }
}代码解释:
- [HttpPost] 属性指定该Action只能通过POST请求访问。
- string resumeData 参数接收从隐藏字段提交的JSON数据。
- JsonConvert.DeserializeObject
(resumeData) 使用 Newtonsoft.Json 库将JSON字符串反序列化为 ResumeData 对象。 - ResumeData, WorkExperience, 和 Education 类定义了数据的结构。 请确保这些类的属性名称与JavaScript对象中的属性名称匹配。
- 在 Submit Action中，可以处理简历数据，例如将其保存到数据库。
注意事项
- 数据验证: 在服务器端对接收到的数据进行验证，以确保数据的有效性和安全性。
- 错误处理: 添加错误处理机制，以处理可能发生的异常情况。
- 安全性: 防止跨站脚本攻击 (XSS) 和其他安全漏洞。 对用户输入进行适当的编码和转义。
- JSON 序列化/反序列化库: 确保在你的 ASP.NET MVC 项目中安装了 Newtonsoft.Json 库。 可以使用 NuGet 包管理器来安装。
总结
通过本文，你学习了如何使用JavaScript从包含多个模块的表单中收集简历数据，将其转换为JSON字符串，并将其发送到ASP.NET MVC服务器。 这种方法可以灵活地处理复杂表单数据，并将其安全地传输到服务器进行处理。记住要进行数据验证、错误处理和安全防护，以确保应用程序的稳定性和安全性。
