Как отправить значение кнопки в бэкэнд PHP через POST с помощью ajax?

Опубликовано: 1 Декабря, 2021

Цель этой статьи - отправить значение кнопки в серверную часть PHP с помощью AJAX в документе HTML.

Подход: создайте кнопку в HTML-документе и назначьте ей идентификатор. В файле JavaScript добавьте прослушиватель событий к кнопке, т. Е. Щелчком. Затем выполняется запрос к файлу PHP с помощью jQuery Ajax.

HTML код:

HTML

 <!-- HTML Code -->
 <!DOCTYPE html>
 < html lang = "en" >
 < head >
    < meta charset = "UTF-8" >
    < meta name = "viewport" content =
        "width=device-width, initial-scale=1.0" > 
    <!-- JavaScript file -->
    < script src = "script.js" ></ script > 
    <!-- jQuery Ajax CDN -->
    < script src =
 " https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js " >
    </ script >
 </ head >
 < body > 
    <!-- Button -->
    < button id = "btn" value = "hello world" >
        Click On me!
    </ button >
 </ body >
 </ html > 

Код JavaScript: Ниже приведен код файла «script.js».

Javascript

// Button DOM
let btn = document.getElementById("btn");
 
// Adding event listener to button
btn.addEventListener("click", () => {
 
    // Fetching Button value
    let btnValue = btn.value;
 
    // jQuery Ajax Post Request
    $.post("action.php", {
        btnValue: btnValue
    }, (response) => {
        // response from PHP back-end
        console.log(response);
    });
});

Код PHP: Ниже приведен код файла «action.php».

PHP

 <?php
    // Checking, if post value is
    // set by user or not
    if (isset( $_POST [ 'btnValue' ]))
    {
        // Getting the value of button
        // in $btnValue variable
        $btnValue = $_POST [ 'btnValue' ];
      
         // Sending Response
        echo "Success" ;
    }
 ?>

Выход:

Technical Scripter JavaScript JQuery Picked PHP-Misc HTML HTML-Misc JavaScript-Misc

Как отправить значение кнопки в бэкэнд PHP через POST с помощью ajax?

HTML

Javascript

PHP

РЕКОМЕНДУЕМЫЕ СТАТЬИ