本文介绍了如何使用 JavaScript 从包含工作经历和教育经历等模块化信息的表单中提取数据，并将其发送到 ASP.NET MVC 服务器。重点讲解了如何遍历动态生成的表单模块，收集数据并将其组织成 JSON 格式，最后通过 AJAX 请求将数据发送到服务器端进行处理。
构建前端表单结构
首先，我们需要一个 HTML 表单，其中包含动态添加的工作经历和教育经历模块。每个模块都包含相应的输入字段，例如公司名称、职位、起止日期等。
<form id="resumeForm">
<div id="workExperiencesContainer">
<!-- 工作经历模块将动态添加到这里 -->
</div>
<button type="button" id="addWorkExperience">添加工作经历</button>
<div id="educationsContainer">
<!-- 教育经历模块将动态添加到这里 -->
</div>
<button type="button" id="addEducation">添加教育经历</button>
<button type="button" id="submitResume">提交简历</button>
</form>使用 JavaScript 收集表单数据
接下来，使用 JavaScript 遍历表单中的工作经历和教育经历模块，并将数据收集到一个 JavaScript 对象中。
$(document).ready(function() {
$('#submitResume').click(function() {
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);
});
// 将数据发送到服务器
sendDataToServer(data);
});
// 添加工作经历模块的示例代码
$('#addWorkExperience').click(function() {
let workExperienceModule = `
<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>
`;
$('#workExperiencesContainer').append(workExperienceModule);
});
// 添加教育经历模块的示例代码
$('#addEducation').click(function() {
let educationModule = `
<div class="education-module">
<input type="text" name="educationInstitution" placeholder="学校名称">
<input type="text" name="educationDegree" placeholder="学位">
<input type="date" name="educationGraduationDate" placeholder="毕业日期">
</div>
`;
$('#educationsContainer').append(educationModule);
});
});使用 AJAX 发送数据到服务器
使用 AJAX 将收集到的数据发送到 ASP.NET MVC 服务器。可以将数据序列化为 JSON 字符串，并将其作为请求体发送。
AOXO_CMS建站系统企业通用版1.0
下载
一个功能强大、性能卓越的企业建站系统。使用静态网页技术大大减轻了服务器负担、加快网页的显示速度、提高搜索引擎推广效果。本系统的特点自定义模块多样化、速度快、占用服务器资源小、扩展性强，能方便快捷地建立您的企业展示平台。简便高效的管理操作从用户使用的角度考虑，对功能的操作方便性进行了设计改造。使用户管理的工作量减小。网站互动数据可导出Word文档，邮件同步发送功能可将互动信息推送到指定邮箱，加快企业
立即学习“Java免费学习笔记（深入）”；
function sendDataToServer(data) {
$.ajax({
url: '/Resume/SubmitResume', // 替换为您的服务器端点
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(data),
success: function(response) {
console.log('数据发送成功:', response);
alert('简历提交成功！');
},
error: function(error) {
console.error('数据发送失败:', error);
alert('简历提交失败！');
}
});
}ASP.NET MVC 服务器端处理
在 ASP.NET MVC 控制器中，创建一个 Action 来接收和处理简历数据。需要创建一个与前端数据结构相匹配的 ViewModel。
public class ResumeViewModel
{
public List<WorkExperienceViewModel> WorkExperiences { get; set; } = new List<WorkExperienceViewModel>();
public List<EducationViewModel> Educations { get; set; } = new List<EducationViewModel>();
}
public class WorkExperienceViewModel
{
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 EducationViewModel
{
public string InstitutionName { get; set; }
public string Degree { get; set; }
public DateTime GraduationDate { get; set; }
}然后，在控制器中创建 Action 方法来接收和处理数据：
[HttpPost]
public ActionResult SubmitResume(ResumeViewModel resume)
{
if (ModelState.IsValid)
{
// 在这里处理简历数据，例如保存到数据库
// 可以使用 resume.WorkExperiences 和 resume.Educations 访问数据
// 返回成功响应
return Json(new { success = true, message = "简历已成功提交！" });
}
else
{
// 返回错误响应
return Json(new { success = false, message = "简历提交失败，请检查输入信息！" });
}
}注意事项
- 数据验证： 在前端和后端都进行数据验证，以确保数据的完整性和准确性。
- 错误处理： 在 AJAX 请求中添加错误处理机制，以便在数据发送失败时通知用户。
- 安全性： 对发送到服务器的数据进行适当的编码和转义，以防止跨站脚本攻击 (XSS)。
- 动态表单元素： 确保使用事件委托来处理动态添加的表单元素的事件。
- 日期格式： 确保前端和后端使用一致的日期格式。可以使用 moment.js 等库来处理日期格式化。
总结
本文介绍了如何使用 JavaScript 从包含动态模块的表单中收集数据，并将其发送到 ASP.NET MVC 服务器。通过使用 AJAX 请求，可以实现无刷新提交表单数据。记住要进行数据验证、错误处理和安全性措施，以确保应用程序的稳定性和安全性。这种方法可以应用于各种需要收集动态表单数据的场景，例如问卷调查、产品配置等。
