如何在ajax中提交表单数据和凭据？

本文的目的是在 HTML 文档中使用 AJAX 将表单数据和凭据发送到PHP后端。

方法：在 HTML 文档中创建一个带有提交按钮的表单，并为该按钮分配一个 id。在 JavaScript 文件中，向表单的提交按钮（即单击）添加一个事件侦听器。然后使用 jQuery Ajax 向PHP文件发出请求。

HTML代码：

HTML

  

    
    
  
    
    
    
  
    
    
  
    
    
        .container {
            margin: 35px 0px;
        }
  
        input,
        textarea,
        button {
            display: block;
            margin: 30px auto;
            outline: none;
            border: 2px solid black;
            border-radius: 5px;
            padding: 5px;
        }
  
        button {
            cursor: pointer;
            font-size: large;
            font-weight: bolder;
        }
  
        h1 {
            text-align: center;
        }
    

  

    
        Demo Form
        
        
            
  
            
  
                        
  
            
            
                Submit
            
        
    

  

JavaScript 代码：以下是“script.js”文件的代码。

Javascript

// Form Submit Button DOM
let submitBtn = document.getElementById('submitBtn');
  
// Adding event listener to form submit button 
submitBtn.addEventListener('click', (event) => {
  
    // Preventing form to submit
    event.preventDefault();
      
    // Fetching Form data
    let name = document.getElementById('name').value;
    let age = document.getElementById('age').value;
    let address = document.getElementById('address').value;
  
    // jQuery Ajax Post Request
    $.post('action.php', {
  
        // Sending Form data
        name : name,
        age : age,
        address : address
    }, (response) => {
  
        // Response from PHP back-end
        console.log(response);
    });
});

PHP代码：以下是“动作”的代码。 PHP”文件。

输出：