如何在提交联系人表单后在同一页面中获取成功消息？

在提交联系人表单后在同一页面中获取成功消息，可以通过以下步骤实现：

前端开发：在前端页面中创建一个联系人表单，包括输入姓名、邮箱、电话等信息的字段，并添加一个提交按钮。通过HTML和CSS进行页面布局和样式设计。使用JavaScript编写前端交互逻辑。
后端开发：在后端服务器端使用一种后端语言（如Java、Python、Node.js等）进行开发。接收前端提交的表单数据，并进行验证、处理和存储。可以使用数据库（如MySQL、MongoDB等）进行数据的持久化存储。
后端逻辑处理：在后端校验表单数据的合法性，确保用户输入的信息符合要求。如果数据合法，将数据存储到数据库中，并生成一个成功的消息。
前后端交互：前端使用AJAX或者表单的默认提交方式将用户输入的数据发送到后端。如果使用AJAX，可以通过监听表单的提交事件，阻止表单的默认提交行为，并使用XMLHttpRequest或fetch API发送异步请求。如果使用表单的默认提交方式，可以在表单的action属性中指定后端接口的URL。
获取成功消息：在前端页面中，监听后端返回的响应，如果响应状态码表示成功（如HTTP状态码200），则根据接口返回的数据，显示一个成功的消息提示给用户。可以通过DOM操作，动态地在页面中插入一个消息元素，并设置相应的文本内容。

以下是一个示例代码，实现了在同一页面中获取成功消息的功能：

前端代码（HTML和JavaScript）：

<!DOCTYPE html>
<html>
<head>
  <title>Contact Form</title>
  <script>
    function submitForm() {
      var form = document.getElementById("contactForm");
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "/submit-form", true);
      xhr.setRequestHeader("Content-type", "application/json");
      xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
          if (xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            showMessage(response.message);
          } else {
            showMessage("Failed to submit the form. Please try again later.");
          }
        }
      };
      var data = {
        name: form.name.value,
        email: form.email.value,
        phone: form.phone.value
      };
      xhr.send(JSON.stringify(data));
    }
  
    function showMessage(message) {
      var messageElement = document.getElementById("message");
      messageElement.innerText = message;
    }
  </script>
</head>
<body>
  <h1>Contact Form</h1>
  <form id="contactForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required><br>
  
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required><br>
  
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone" required><br>
  
    <input type="button" value="Submit" onclick="submitForm()">
  </form>
  
  <div id="message"></div>
</body>
</html>

后端代码（Node.js）：

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

app.use(bodyParser.json());

app.post('/submit-form', (req, res) => {
  // 校验表单数据
  if (!req.body.name || !req.body.email || !req.body.phone) {
    return res.status(400).json({ message: 'Please provide all the required information.' });
  }

  // 在此处可以将数据存储到数据库中

  // 返回成功消息
  res.json({ message: 'Form submitted successfully!' });
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

上述示例代码是一个基本的实现方式，可以根据具体需求进行调整和扩展。在实际开发中，可以使用前端框架（如React、Angular、Vue.js）和后端框架（如Express、Spring Boot、Django）来提升开发效率和代码质量。同时，为了保证安全性，需要对表单数据进行合法性校验、防止XSS攻击和SQL注入等安全问题。