通过JavaScript将表单简历数据发送到ASP.NET MVC服务器

本文档旨在指导开发者如何使用JavaScript从包含多个工作经历和教育经历模块的表单中收集简历数据，并将其发送到ASP.NET MVC服务器。我们将详细介绍如何遍历表单模块，提取数据，并将数据格式化后通过隐藏字段提交到服务器。

从表单收集简历数据

在构建简历表单时，通常会允许用户添加多个工作经历和教育经历模块。每个模块都包含一组相关的输入字段。以下是如何使用JavaScript遍历这些模块并收集数据：

1. HTML 结构:

假设你的HTML结构如下所示，其中 .work-experience-module 和 .education-module 分别代表工作经历和教育经历的模块：

  

    
    
    
    
    
  

  

    
    
    
  

  
  提交

2. 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();
  });
});

代码解释:

Prisms AI

无代码构建AI应用的平台

下载

• $(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服务器。

1. 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);

        // 处理简历数据，例如保存到数据库

        // 返回结果
        return View();
    }
}

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; }
}

代码解释:

• [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服务器。 这种方法可以灵活地处理复杂表单数据，并将其安全地传输到服务器进行处理。记住要进行数据验证、错误处理和安全防护，以确保应用程序的稳定性和安全性。