如何在jQuery中使用ajax提交一个表单

jQuery是一个开源的JavaScript库，它简化了HTML/CSS文档，或者更准确地说，文档对象模型（DOM）和JavaScript之间的互动。阐述这些术语，jQuery简化了HTML文档的遍历和操作，浏览器事件处理，DOM动画，Ajax交互，以及跨浏览器的JavaScript开发。

$.ajax()函数用于使用jQuery的ajax调用。

语法:

$.ajax({name:value, name:value, ... })

我们可以通过ajax使用提交按钮和提及以下参数的值来提交一个表单。

type。它用于指定请求的类型。
url。它用于指定发送请求的URL。
data。它用于指定要发送至服务器的数据。

示例:

<!Doctype html>
<html>
  
<head>
    <title>JQuery AJAX Call</title>
      
    <!--Include JQuery Library -->
    <script src=
"https://code.jquery.com/jquery-3.5.0.js">
    </script>
    <script>
      
    // When DOM is loaded this 
    // function will get executed
     $(() => { // function will get executed // on click of submit button$ ("#submitButton").click(function(ev) {
            var form =  $("#formId"); var url = form.attr('action');$ .ajax({
                type: "POST",
                url: url,
                data: form.serialize(),
                success: function(data) {
                      
                    // Ajax call completed successfully
                    alert("Form Submited Successfully");
                },
                error: function(data) {
                      
                    // Some error in ajax call
                    alert("some Error");
                }
            });
        });
    });
    </script>
</head>
  
<body>
    <form id='formId' action=''> Name:
        <input type='text' 
               id='nm' 
               name='nm'> 
        </input>
        <br> Student ID:
        <input type='text' 
               id='studentId' 
               name='studentId'> 
        </input>
        <br> Contact No. :
        <input type='text' 
               id='contactNumber' 
               name='contactNumber'> 
        </input>
        <br>
        <button type='submit' 
               id='submitButton'>
            Submit
        </button>
    </form>
</body>
  
</html>

输出:

如何在jQuery中使用ajax提交一个表单？