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

在这篇文章中，我们将学习如何使用JQuery在不刷新页面的情况下提交一个表单或表单的一部分，并通过实例了解其实现。

如何防止HTML表单的提交？

一般来说，当我们提交一个表单时，我们应该点击一个提交按钮，然后我们的页面将导航到另一个路由，正如表单动作属性中提到的那样，但我们可以在网页的后台进行，而不将网页导航到其他路由。而这可以通过使用event.preventDefault()方法来实现，该方法可以阻止默认事件，不允许它被触发。当我们点击提交按钮时，一个事件被触发，所以我们需要阻止这个事件，因为这个事件是负责把用户带到其他路线。因此，我们必须给表单附加一个onsubmit事件监听器，这样当用户点击提交按钮时，我们就可以通过使用preventDefault方法获得该事件对象并阻止该特定事件触发。在使用event.preventDefault()方法防止事件发生后，我们需要获得表单的值，并向我们想要发布值的那个特定路由发出一个发布请求。

前提条件 。在我们进行之前，需要对HTML、CSS、Javascript和JQuery有基本了解。

步骤:

创建一个HTML文件，在javascript代码上方添加jquery库CDN。
创建2个输入字段，一个提交按钮，以及一个显示结果的跨度。
在表单中添加一个onsubmit监听器，并接受一个只有一个参数的回调。

例子。在这个例子中，我们采取了一个假的发布请求，我们需要发布一些信息，服务器将返回ID作为一个对象。

<!DOCTYPE html>
<html>
  
<head>
    <style>
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
      
    h1 {
        color: green;
    }
      
    h3 {
        text-align: center;
    }
      
    input,
    span {
        margin-top: 20px;
    }
    </style>
</head>
  
<body>
    <div>
        <h1 class="container">
            GeeksforGeeks
        </h1>
        <h3>Submitting the form without page refresh</h3>
    </div>
    <form>
        <div class="container">
            <input placeholder="Name" type="text" name="Name" />
            <input placeholder="Job" type="text" name="job" />
            <input type="submit" /> 
        </div> 
        <span class="container"></span> 
    </form>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
    <script type="text/javascript">
    (document).ready(function() {
        ('form').on('submit', function(event) {
            event.preventDefault();
              
            // It returns a array of object 
            let userinfo = (this).serializeArray();
            let user = {};
            userinfo.forEach((value) => {
                  
                // Dynamically create an object
                user[value.name] = value.value;
            });
            let url = "https://reqres.in/api/users";
            .ajax({
                method: "POST",
                url: url,
                data: user
            }).done(function(msg) {
                  
                // When the request is successful
                ('span').text('user is successfully created with Id ' + msg.id);
            }).fail(function(err, textstatus, error) {
                ('span').text(textstatus);
            });
        });
    });
    </script>
</body>
  
</html>