如何在PHP中單擊按鈕執行AJAX？

Question

我正在開發WordPress插件，並已使用php文件在管理設置中添加了一些元素。 現在，我想在按鈕單擊上執行一個php函數，並在互聯網上搜索后，AJAX似乎是一種方法。 但是我一點都不了解AJAX。 這是我編寫的一些代碼。 而且我知道這段代碼似乎有些混亂，但請看一看。

echo"<form method='POST' action='temp.php'>";

function slideyglidey_settings_section_callback() {
  esc_html_e( 'Plugin settings section description', 'slideyglidey' );
}
function slideyglidey_settings_input_file_callback() {
  $options = get_option( 'slideyglidey_settings' );
    $file_input = '';
    if( isset( $options[ 'file_input' ] ) ) {
        $file_input = esc_html( $options['file_input'] );
    }
  echo '<input type="file" id="slideyglidey_fileinput" 
  name="slideyglidey_settings[file_input]" value="' . $file_input . '" 
  onchange="onFileSelected(event)" />';
  } 
 function slideyglidey_settings_img_src_callback() {
   $options = get_option( 'slideyglidey_settings' );
    $img_src = '';
    if( isset( $options[ 'img_src' ] ) ) {
        $img_src = esc_html( $options['img_src'] );
    }
  echo '<img src="" id="slideyglidey_imgsrc" 
  name="slideyglidey_settings[img_src]" value="' . $img_src . '" width="350" 
  height="200"/>';
  }
 function slideyglidey_settings_upload_btn_callback() {
   $options = get_option( 'slideyglidey_settings' );
   $upload_btn = '';
   if( isset( $options[ 'upload_btn' ] ) ) {
     $upload_btn = esc_html( $options['upload_btn'] );
   }

   echo '<input type="button" id="slideyglidey_uploadbtn" 
   name="slideyglidey_settings[upload_btn]" value="Upload"/>';
  }

 echo"</form>";
 ?>
 <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script> 
      var $checkboxes = $( "form input:file" )
      $checkboxes.on("change", function(){
            var st="helloHOWAREYOU";


        $.ajax({
          type: "POST",
          url: "temp.php",
          cache: false,
          data: 'name=' + st,
          success: function(res){
            $('#result').html(res);
          }
        });
      })
    </script> 

temp.php

<?php 
  $name = $_POST['name'];
   echo '<script>console.log($name)</script>';
?>

當我執行此代碼時，沒有任何錯誤，但在控制台日志中也沒有得到該消息。 任何幫助表示贊賞。 謝謝！

Answer 1

您可以使用這種方式來傳遞數據

    $.ajax({
    ...
    data : {name : 'helloHOWAREYOU'},
    ...
    });

Answer 2

假設這是您的按鈕：

echo  <button id="handler">click me</button>

然后將以下代碼放在<script>標記中：

 document.getElementById('handler').addEventListener('click', AJAX); function AJAX() { const req = new XMLHttpRequest(); req.addEventListener("load", (data) => console.dir(data.target.response)); req.open("GET", "https://reqres.in/api/users?page=2"); req.send(); } 

 <button id="handler">click me</button> 

注意我現在向提供一些虛擬數據的網站執行AJAX請求。 當然，您必須將其更改為自己的要求。