4.jQuery中Ajax提交表单数据

在jQuery中，可以使用$.ajax()方法来提交表单数据。以下是一个简单的例子：

HTML 表单代码：

<form id="myForm">
    <input type="text" name="username" placeholder="Enter username">
    <input type="password" name="password" placeholder="Enter password">
    <input type="submit" value="Submit">
</form>

jQuery 和 Ajax 代码：

$(document).ready(function() {
    $('#myForm').submit(function(e) {
        e.preventDefault(); // 阻止表单默认提交行为
 
        var formData = $(this).serialize(); // 序列化表单数据
 
        $.ajax({
            type: 'POST',
            url: 'submit_form.php', // 提交到的URL
            data: formData,
            success: function(response) {
                // 成功提交后的回调函数
                console.log(response);
            },
            error: function(xhr, status, error) {
                // 出错时的回调函数
                console.error(error);
            }
        });
    });
});

在这个例子中，当用户点击提交按钮时，我们阻止了表单的默认提交行为，并且使用$.ajax()方法以POST请求的方式将表单数据提交到服务器端的submit_form.php。成功提交后，服务器端脚本可以处理这些数据，并且返回响应，在success回调函数中我们打印出响应内容。如果出现错误，我们在error回调函数中打印错误信息。