本文将详细介绍如何使用 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();
代码解释:
立即学习“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 服务器进行处理。 务必注意数据验证和安全性，并根据实际需求进行调整和优化。
以上就是构建简历数据并使用 JavaScript 发送到 ASP.NET MVC 服务器的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1528493.html
微信扫一扫 
支付宝扫一扫 
