Ajax 如何同时传递表单数据和凭据

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

方法： 在HTML文档中创建一个带有提交按钮的表单，并为该按钮分配一个id。然后，在JavaScript中，通过添加事件监听器（即click事件）来监听表单的提交按钮。接下来，使用jQuery Ajax将请求发送到一个PHP文件。

示例：

<!-- HTML Code -->
<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <!-- jQuery Ajax CDN -->
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </script> 
  
    <!-- JavaScript File -->
    <script src="script.js"></script> 
</head> 
  
<body> 
    <div class="container"> 
        <h1>Demo Form</h1> 
        <!-- Form -->
        <form> 
            <input type="text" name="name" 
                id="name" placeholder= 
                "Enter your Name"> 
  
            <input type="text" name="age" 
                id="age" placeholder= 
                "Enter your Age"> 
  
            <textarea name="aaddress" 
                id="address" cols="30" 
                rows="10" placeholder= 
                "Enter your address"> 
            </textarea> 
  
            <!-- Form Submit Button -->
            <button type="submit" 
                id="submitBtn"> 
                Submit 
            </button> 
        </form> 
    </div> 
</body> 
</html>

CSS代码

.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; 
}

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 
  
// Checking if post value is set 
// by user or not 
if(isset( $_POST['name'])) {        // Getting the data of form in     // different variables$ name =  $_POST['name'];$ age =  $_POST['age'];$ address = $_POST['address']; 
  
    // Sending Response 
    echo "Success"; 
} 
?>

输出：

Ajax 如何同时传递表单数据和凭据