如何在PHP中单击按钮执行AJAX?

时间:2018-08-18 14:34:14

标签: javascript php ajax wordpress plugins

我正在开发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>';
?>

当我执行此代码时,没有任何错误,但在控制台日志中也没有得到该消息。 任何帮助表示赞赏。 谢谢!

2 个答案:

答案 0 :(得分:0)

您可以使用这种方式传递数据

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

答案 1 :(得分:0)

假设这是您的按钮:

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请求。当然,您必须将其更改为自己的要求。