Question

我想根据传递给使用AJAX的服务器的className显示一条消息。我是新ajax，对此我一无所知。

myhtml代码：

<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代码：

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

ajax代码：

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代码：

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

Answer 1

在JS中

var request = $.ajax({
        async: false,
        url: 'Php.file', / your php file path
        type: "POST",
        data: "Value1=your value";
        datatype: 'html',
    });
    request.done(function(data) {
        //data you will handle from php file
    });

在PHP中接收

$data = $_POST['data'];
  //you can check like this
  if(empty($data))
  {
    echo("none received");
  }
  else{
   echo 'passed parameter '+$data;
   //in here you will receive as data in js file
you will receive in data in js as 'passed parameter+ your value'
  }

Answer 2

这是演示版

只需复制并尝试

我添加了额外的跨度，并且ajax文件内容已复制到该内容

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

这是我的php文件

  if( $_REQUEST["displayMsg"] ){
     $msg = $_REQUEST['displayMsg'];
     echo "".$msg ;
  }

Answer 3

首先是创建一个包含jQuery的HTML文件。

假设您有一个隐藏的输入字段。

<input type="hidden" id="mydata" value="sampledata">

您现在可以使用脚本$("#mydata").val();

从隐藏字段中获取数据。

您现在可以按以下方式编写Ajax代码

$.ajax({ 
  type: 'post',
  url: '/path/to/ajax.php',
  data: {
    postvariable: $("#mydata").val()
  },
  success: function() {
    alert('success');
  }
});

现在，在ajax.php文件中，您可以将值接收为$_POST['postvariable']

您现在可以声明 $myphpvar = $_POST['postvariable'];

哪里 echo $myphpvar; //will print 'sampledata' without quotes

总而言之，这就像使用带有方法发布的表单提交表单一样。除了使用ajax时，不需要重新加载页面。

您可以在我的教程中阅读有关此内容的更多信息： https://www.davidangulo.xyz/website-development/how-to-pass-value-from-javascript-to-php/

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

3 个答案: