如何使用 jQuery 在不刷新页面的情况下提交表单或表单的一部分？

在网页开发中，表单是交互性非常强的一个组件，通过表单我们可以收集用户输入的信息，实现与用户的互动。而如果每次提交表单都要刷新页面，会给用户带来不好的使用体验，因此在不刷新页面的情况下提交表单可以大大提升网站的用户体验。jQuery是前端开发中的一个非常著名的工具库，它可以方便地实现这个功能。

发送 AJAX 请求

jQuery提供了一个非常强大的功能——AJAX，AJAX允许JavaScript向服务器发送请求并接收响应，从而达到动态更新页面内容的效果。利用AJAX请求，我们可以在不刷新页面的情况下提交表单或者表单的一部分。

首先，我们需要给表单添加一个提交事件，通过该事件触发AJAX请求。以下是一个实现的例子：

$("#myForm").submit(function(event){
    //阻止表单的默认提交行为
    event.preventDefault();
    //获取表单数据
    var formData = $(this).serialize();
    //通过AJAX发送请求
    $.ajax({
        url: "submit.php",
        type: "post",
        data: formData,
        success: function(response){
            //请求成功后的回调函数
            alert(response);
        },
        error: function(){
            //请求失败后的回调函数
            alert("请求失败");
        }
    });
});

在这个例子中，通过jQuery选择器选择了一个ID为“myForm”的表单，并将其提交事件与一个函数绑定。在该函数中，我们首先用event.preventDefault()方法阻止表单的默认提交行为，然后通过$(this).serialize()方法获取表单的数据，将其发送到服务器端的submit.php文件中。如果请求成功，我们将在success回调函数中使用alert()方法显示响应的信息；如果请求失败，我们将在error回调函数中显示一个提示信息。

其中，我们也可以通过指定dataType属性和contentType属性来指定请求的数据格式和响应的数据格式。例如：

$.ajax({
    url: "submit.php",
    type: "post",
    dataType: "json",
    contentType: "application/json",
    data: JSON.stringify(formData),
    success: function(response){
        //请求成功后的回调函数
        alert(response.message);
    },
    error: function(){
        //请求失败后的回调函数
        alert("请求失败");
    }
});

在这个例子中，我们将dataType属性指定为“json”，contentType属性指定为“application/json”，同时使用JSON.stringify()方法将表单数据转换为JSON格式的字符串发送请求。

提交表单的一部分

除了提交整个表单之外，我们也可以只提交表单的一部分。例如，我们可以只提交一个输入框的值，或者只提交一个单选框或多选框的选中状态。

在这种情况下，我们可能需要手动构建待提交的数据，然后通过AJAX发送请求。以下是一个例子：

<form>
    <input type="text" name="username" id="username">
    <input type="text" name="email" id="email">
    <input type="button" id="submitBtn" value="提交">
</form>

$("#submitBtn").click(function(){
    //构建待提交的数据
    var data = {
        username: $("#username").val(),
        email: $("#email").val()
    };
    //通过AJAX发送请求
    $.ajax({
        url: "submit.php",
        type: "post",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify(data),
        success: function(response){
            //请求成功后的回调函数
            alert(response.message);
        },
        error: function(){
            //请求失败后的回调函数
            alert("请求失败");
        }
    });
});

在这个例子中，当提交按钮被点击时，我们将会构建一个对象data，包含表单中的两个输入框的值，然后通过AJAX发送请求。提交表单的一部分可以帮助我们实现更为细粒度的控制，提高表单的灵活性和用户体验。

综上所述，利用jQuery和AJAX实现在不刷新页面的情况下提交表单和表单的一部分是一个比较简单而且实用的技术。开发者可以根据自己的需求对其进行扩展和调整，从而满足不同的业务场景。