jQuery ajax提交Form表单实例(附demo源码)

下面我将详细讲解“jQuery ajax提交Form表单实例(附demo源码)”的实现方法和步骤。

步骤一：准备工作

在项目中引入jQuery库，以及form表单提交所需要的相关资源。比如在head标签中引入：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!--form表单提交所需资源-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>

步骤二：html代码编写

在body中编写一个表单，设置id为form1，并设置action和method属性，示例代码如下：

<form id="form1" action="/submit" method="post">
    <input type="text" name="username" placeholder="用户名" required>
    <input type="password" name="password" placeholder="密码" required>
    <button type="submit">提交</button>
</form>

步骤三：jquery代码编写

引入jquery库

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

绑定表单提交事件，并使用ajax进行表单提交和数据接收，代码如下：

$(function(){
    $('#form1').submit(function(){
        $(this).ajaxSubmit({
            type:'post',
            url:'/submit',
            success:function(data){
                // 数据返回后的处理程序
            },
            error:function(XmlHttpRequest,textStatus,errorThrown){
                console.log(XmlHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
        return false;
    });
});

具体解释如下：

首先使用jQuery的submit()函数来绑定表单提交事件；
通过ajaxSubmit方法，进行表单提交，其中type设置为post，url设置表单提交的地址，success回调函数处理成功时返回的数据，error回调函数用于处理提交发生错误的情况；
最后，通过return false阻止表单的默认提交事件。

示例一：表单序列化

在上面的代码中，使用到jquery form插件的ajaxSubmit方法，其中可以传入参数。我们把这个参数对象进行解析，其中有个大家经常用的属性是 data。

data 表示表单的序列化字符串，即 name1=value1&name2=value2&name3=value3 的字符串。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery ajax提交Form表单实例(附demo源码)</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
</head>
<body>
    <form id="form1" action="/submit" method="post">
        <p>姓名：<input type="text" name="name" value="Miao"></p>
        <p>邮箱：<input type="text" name="email" value="miao@test.com"></p>
        <p>网址：<input type="text" name="url" value="www.miao.cn"></p>
        <p>内容：<textarea name="content">你好</textarea></p>
        <p><input type="submit" value="提交"></p>
    </form>
    <script>
        $(function(){
            $('#form1').submit(function(){
                var data = $(this).serialize();
                console.log(data);
                return false;
            });
        });
    </script>
</body>
</html>

当我们填写表单后，点击提交按钮，控制台会打印出以下内容：

name=Miao&email=miao@test.com&url=www.miao.cn&content=%E4%BD%A0%E5%A5%BD

以上内容即为表单中各个控件的 name 和 value 组成的序列化字符串，其中的 content 控件中的中文字符“你好”会通过 encodeURIComponent() 方法进行编码。

示例二：使用回调函数处理返回数据

可以通过 success 和 error 参数来设置 ajax 的成功和出错时的回调函数。在本示例中，我们使用 success 函数来处理服务器的返回数据。本示例在服务器返回数据"提交成功"后，将显示一条提示信息。示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery ajax提交Form表单实例(附demo源码)</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
</head>
<body>
    <form id="form1" action="/submit" method="post">
        <p>姓名：<input type="text" name="name" value="Miao"></p>
        <p>邮箱：<input type="text" name="email" value="miao@test.com"></p>
        <p>网址：<input type="text" name="url" value="www.miao.cn"></p>
        <p>内容：<textarea name="content">你好</textarea></p>
        <p><input type="submit" value="提交"></p>
    </form>
    <div id="msg"></div>
    <script>
        $(function(){
            $('#form1').submit(function(){
                $(this).ajaxSubmit({
                    type:'post',
                    url:'/submit',
                    success:function(data){
                        $('#msg').html(data); // 显示提示信息
                    },
                    error:function(XmlHttpRequest,textStatus,errorThrown){
                        console.log(XmlHttpRequest);
                        console.log(textStatus);
                        console.log(errorThrown);
                    }
                });
                return false;
            });
        });
    </script>
</body>
</html>

在本示例中，服务器在成功处理请求后，向客户端返回字符串："提交成功"。客户端的 success 回调函数将把这个字符串置于 id 为 msg 的 div 中显示出来。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery ajax提交Form表单实例(附demo源码) - Python技术站