【前端】Ajax-form表单与模板引擎

在这个例子中，我们将使用Ajax和一个模板引擎来提交表单并更新页面上的信息，而不是进行页面刷新。

<!-- 假设我们有一个简单的表单 -->
<form id="myForm">
  <input type="text" name="username" placeholder="Enter username">
  <input type="email" name="email" placeholder="Enter email">
  <input type="submit" value="Submit">
</form>
 
<!-- 假设我们有一个用于显示提交结果的模板 -->
<script type="text/template" id="resultTemplate">
  <p>Username: <%- username %></p>
  <p>Email: <%- email %></p>
</script>
 
<script>
// 使用jQuery和Handlebars.js来处理Ajax和模板渲染
$(document).ready(function() {
  $('#myForm').submit(function(e) {
    e.preventDefault(); // 阻止表单默认提交行为
 
    var formData = $(this).serialize(); // 序列化表单数据
 
    $.ajax({
      type: 'POST',
      url: '/submit-form', // 提交到的URL
      data: formData,
      success: function(data) {
        // 假设后端返回的数据结构为{username: '', email: ''}
        var template = Handlebars.compile($('#resultTemplate').html());
        var html = template(data);
        $('#formResults').html(html); // 将结果插入到指定的元素中
      },
      error: function(xhr, status, error) {
        console.error("An error occurred: " + status + "\nError: " + error);
      }
    });
  });
});
</script>

在这段代码中，我们使用jQuery来处理表单的序列化和Ajax请求，以及Handlebars.js来渲染返回的数据。当用户提交表单时，我们阻止了默认的表单提交行为，并使用Ajax异步向服务器发送数据。服务器处理完数据后，将结果以JSON格式返回，然后我们使用Handlebars模板引擎将数据插入到页面上预定义的模板中，最终显示在页面上，而不是进行页面刷新。