jQuery使用$.ajax提交表单完整实例

下面给出一份详细的jQuery使用$.ajax提交表单的攻略。

1. 准备工作

首先你需要引入jQuery库文件，否则无法使用$.ajax方法。你可以在html页面的头部中加入以下代码段。

<head>
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
</head>

接着，你需要准备用于提交表单的HTML表单代码。这样我们才能顺利地将数据提交给后台。下面是HTML代码的示例内容。

<form id="myForm" action="/submit" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name"><br>

    <label for="age">年龄:</label>
    <input type="text" id="age" name="age"><br>

    <input type="submit" value="提交">
</form>

2. 使用$.ajax方法提交表单

提交表单的关键就在于使用$.ajax方法。我们需要在表单提交的事件中，调用$.ajax方法来提交表单数据。

// 获取表单数据
var formData = $('#myForm').serialize();

// 使用$.ajax方法提交表单
$.ajax({
    url: '/submit', // 提交的URL地址
    type: 'post', // 提交的http请求方式
    dataType: 'json', // 返回的数据类型，这里使用JSON
    data: formData, // 提交的表单数据
    success: function (data) {
        alert('提交成功！'); // 提交成功，输出提示框
    },
    error: function () {
        alert('提交失败！'); // 提交失败，输出提示框
    }
});

上面代码的意思是：获取表单数据，然后使用$.ajax方法提交表单。如果提交成功则弹出提示框，否则提示提交失败。

3. 完整示例说明

接下来，我们将给出两条完整的示例说明，来让大家更好地了解如何使用$.ajax提交表单。

示例1: 使用$.ajax提交表单到后台，后台接收到表单数据之后返回一个html页面

// 获取表单数据
var formData = $('#myForm').serialize();

// 使用$.ajax方法提交表单
$.ajax({
    url: '/submit', // 提交的URL地址
    type: 'post', // 提交的http请求方式
    dataType: 'html', // 返回的数据类型，这里使用HTML
    data: formData, // 提交的表单数据
    success: function (data) {
        // 提交成功，跳转到返回的HTML页面
        window.location.href = data;
    },
    error: function () {
        alert('提交失败！'); // 提交失败，输出提示框
    }
});

上面代码的意思是：将表单数据提交给后台，后台处理完之后返回一个HTML页面，然后使用window.location.href方法跳转到该页面。

示例2: 使用$.ajax提交表单到后台，后台接收到表单数据之后返回一个json格式的结果

// 获取表单数据
var formData = $('#myForm').serialize();

// 使用$.ajax方法提交表单
$.ajax({
    url: '/submit', // 提交的URL地址
    type: 'post', // 提交的http请求方式
    dataType: 'json', // 返回的数据类型，这里使用JSON
    data: formData, // 提交的表单数据
    success: function (data) {
        // 提交成功，输出后台返回的JSON数据
        alert(JSON.stringify(data));
    },
    error: function () {
        alert('提交失败！'); // 提交失败，输出提示框
    }
});

上面代码的意思是：将表单数据提交给后台，后台处理完之后返回一个JSON格式的数据，然后使用JSON.stringify方法将JSON对象转为字符串，输出到提示框中。

结论

以上就是完整的jQuery使用$.ajax提交表单攻略，你需要准备用于提交的HTML代码，然后在表单提交的事件中使用$.ajax方法提交表单。提交成功之后可以根据后台返回的数据格式进行相应的处理。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery使用$.ajax提交表单完整实例 - Python技术站