【3.0】前端基础jQuery之进阶

// 假设我们有一个HTML页面，其中包含一个表单和一个用于显示结果的div
// HTML 示例:
// <form id="myForm">
//   <input type="text" name="username" />
//   <input type="text" name="password" />
//   <input type="submit" value="Submit" />
// </form>
// <div id="results"></div>
 
$(document).ready(function() {
  $('#myForm').submit(function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为
 
    var formData = $(this).serialize(); // 序列化表单数据为字符串
 
    $.ajax({
      type: 'POST',
      url: 'your-server-endpoint', // 替换为你的服务器端点
      data: formData,
      success: function(response) {
        $('#results').text(response); // 在div中显示服务器响应
      },
      error: function(xhr, status, error) {
        console.error("An error occurred: " + status + "\nError: " + error);
      }
    });
  });
});

这段代码展示了如何使用jQuery来处理表单的提交事件，防止其默认行为，然后使用$.ajax()方法以POST请求发送表单数据到服务器。成功接收响应后，将其显示在页面上的一个div元素中。如果请求失败，它会在控制台中记录错误信息。这是一个典型的处理表单提交和异步与服务器交互的场景。