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条)

报告相同问题？

悬赏问题

  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度