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

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

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

如何防止HTML表单的提交?

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

前提条件 。在我们进行之前,需要对HTMLCSS、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>

输出:

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

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程