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

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

如何防止 HTML 表单提交？

通常，当我们提交表单时，我们应该单击提交按钮，然后我们的页面将导航到表单操作属性中提到的另一条路线，但我们可以在网页的后台执行此操作，而无需将网页导航到其他路线.这可以通过使用event.preventDefault() 阻止默认事件并且不允许它触发的方法。当我们点击提交按钮时会触发一个事件，所以我们需要阻止这个事件，因为这个事件负责将用户带到其他路由。因此，我们必须将onsubmit事件侦听器附加到该表单，以便当用户单击提交按钮时，我们可以获取该事件对象并通过使用 preventDefault 方法防止触发该特定事件。在使用event.preventDefault()方法阻止事件之后，我们需要获取表单值并向我们想要发布值的特定路由发出发布请求。

先决条件：在我们继续之前，需要对 HTML、CSS、Javascript 和 JQuery 有基本的了解。

方法：

• 创建一个 HTML 文件并在 javascript 代码上方添加 jquery 库 CDN。
• 创建 2 个输入字段、一个提交按钮和一个显示结果的范围。
• 向表单添加一个onsubmit侦听器并使用一个参数进行回调。

示例：在此示例中，我们采用了一个虚假的发布请求，我们需要在其中发布一些信息，并且服务器会将 id 作为对象返回。

HTML

  

    
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
      
    h1 {
        color: green;
    }
      
    h3 {
        text-align: center;
    }
      
    input,
    span {
        margin-top: 20px;
    }
    

  

    
        
            GeeksforGeeks
        
        Submitting the form without page refresh
    
    
        
            
            
             
         
         
    
    
    
    
    $(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);
            });
        });
    });
    

  

输出：