dqyat62284 2018-06-29 04:15
浏览 59
已采纳

如何使用ajax将数据传递给php？

I want to display a message according to the className passed to server using AJAX . I'm new ajax , I have no idea about that..

myhtml code : 

<div class="header">
        <h2>Configuration</h2>
        <p> Enable: </p> <i class="fas fa-toggle-off " id="enable-btn"></i>
        <span id="demo">Dashboard Enabled</span>
    </div>

myJS code :

function enableButtonClicked() {
    $(document).ready(function () {
        $('#enable-btn').click(function () {
            $( ".dashboard, #demo" ).toggle();
            $(this).toggleClass("fa-toggle-off fa-toggle-on");
        });
    }); 
}

ajax code : 

function displayMessageAccordingToButtonState() {
    var x = document.getElementById('enable-btn').className;
    if( x == 'fas fa-toggle-off'){
        var msg = "Button Disabled"
        $('.header').load('request.php',{"displayMsg":msg});
    }
    else {
        var msg = "Button Enabled"
        $('.header').load('request.php',{"displayMsg":msg});
    }

}

php code : 

<?php
   if( $_REQUEST["displayMsg"] ){
      $msg = $_REQUEST['displayMsg'];
      echo "".$msg ;
   }
?>
  • 写回答

3条回答 默认 最新

  • dongyu4455 2018-06-29 05:25
    关注

    this is working demo

    just copy and try

    i have added extra span and ajax file content is copy to that content

     <html>
      <head>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      </head>
      <body>

      <div class="header">
         <h2>Configuration</h2>
         <p> Enable: </p> <i class="fas fa-toggle-off " id="enable-btn"></i>
         <span id="demo">Dashboard Enabled</span>
     </div>
    <span id="demo2"></span>
      </body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">          </script>
 <script>
$(document).ready(function () {
    $('#enable-btn').click(function () {
        $( ".dashboard, #demo" ).toggle();
        $(this).toggleClass("fa-toggle-off fa-toggle-on");
    });
}); 


 $('#enable-btn').click(function () {   
 var x = document.getElementById('enable-btn').className;    
 if( x == 'fas fa-toggle-off'){
    var msg = "Button Disabled"
    $('#demo2').load('request.php',{"displayMsg":msg},function(responseTxt,      statusTxt, xhr){
    if(statusTxt == "success")
        console.log("External content loaded successfully!"+responseTxt);
    if(statusTxt == "error")
        console.log("Error: " + xhr.status + ": " + xhr.statusText);
});
}
else {
    var msg = "Button Enabled"
            $('#demo2').load('request.php',{"displayMsg":msg},function(responseTxt, statusTxt, xhr){
    if(statusTxt == "success")
        console.log("External content loaded successfully!"+responseTxt);
    if(statusTxt == "error")
        console.log("Error: " + xhr.status + ": " + xhr.statusText);
});
}
 });
 </script>
 </html>

    this is my php file

      if( $_REQUEST["displayMsg"] ){
     $msg = $_REQUEST['displayMsg'];
     echo "".$msg ;
  }
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了