AJAX发布请求仅在Web控制台上有效（预览）

时间：2019-06-30 18:06:18

标签： javascript php jquery ajax

我有一个非常简单的ajax请求，用于“发送”用户在网站上单击的元素的ID。该脚本仅在Web控制台（在网络->预览部分中）上有效。每种浏览器都会发生这种情况。

代码如下：

AJAX REQUEST 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
	$('.point1, .point2, .point3, .point4, .point5, .point6, .point7').click(function(event) {
		var itemid = event.target.id;	

	    $.ajax({
           type: 'post',
           //url: "index.php",
           data: {'itemid' : itemid}, 
           cache : false,
           async : true,
		   dataType: 'html',
		   success: function(data) {
                      alert('success');     
           },
		   failure: function(data) {
                    alert('failure');
           }	
	      });
	});
	</script>

PHP函数 

	<?php	
  
  if(isset($_POST['itemid'])){
        $itemid = $_POST['itemid'];

		echo "success";
		$itemid = (int)$itemid;
		echo $itemid;
    } else{
	echo "failure";}
  
  ?>

您能帮我吗？非常感谢

只需添加图像即可让您更好地了解

已更新：这是完整的代码，希望它不要太混乱（仍然是初学者）：

我得到正确的响应，但是回显json_encode（$ d）;没有打印。 顺便说一句，非常感谢您的支持：）

<?php
$d = array();
if(isset($_POST['itemid'])){
  if($_POST['itemid'] != ""){
    $d['result'] = "success";
    $d['itemid'] = (int)$_POST['itemid'];
  } else{
    $d['result'] = "error";
    $d['error'] = "'itemid' was not set.";
  }
  header('Content-Type: application/json');
  echo json_encode($d);
  exit();
}

if ( !empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off'){
  // La richiesta e' stata fatta su HTTPS
} else {
  // Redirect su HTTPS
  // eventuale distruzione sessione e cookie relativo
  $redirect = 'https://' . $_SERVER['HTTP_HOST'] .
  $_SERVER['REQUEST_URI'];
  header('HTTP/1.1 301 Moved Permanently');
  header('Location: ' . $redirect);
  exit();
}
?>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../style.css" type="text/css">
<?php
setcookie('test', 1, time()+3600);

if(!isset($_GET['cookies'])){
    include_once "../header.php";
    include_once '../footer.php';
    include_once '../right_column.php';

    echo"<script type='text/javascript'></script>\r\n<noscript>JavaScript is off. Please enable to view full site.</noscript>";
} else {
    echo "No Cookies";
}
?>
<div class="map">
  <div class="point1" id="1"> </div>
  <div class="point2" id="2"> </div>
  <div class="point3" id="3"> </div>
  <div class="point4" id="4"> </div>
  <div class="point5" id="5"> </div>
  <div class="point6" id="6"> </div>
  <div class="point7" id="7"> </div>
</div> 
<?php
    $green='rgb(30,255,0)';     
    $yellow='rgb(255,255,0)';
    $red='rgb(255,0,0)';    

    include '../includes/dbhinc.php';

    for ($i = 1; $i <= 7; $i++) {   
        $sql="SELECT nummot, numbici FROM grid WHERE cellaid='$i'";
        $result=mysqli_query($conn, $sql);
        $row = mysqli_fetch_assoc($result);
        $moto=$row["nummot"];
        $bici=$row["numbici"];

        $mezzi=$moto+$bici;

        if($mezzi>=4){
            $color=$green;
            $sql="UPDATE `grid` SET `rgb`='rgb(30,255,0)' WHERE cellaid = $i";
            mysqli_query($conn, $sql); 
            echo "<script> document.getElementById('$i').style.backgroundColor ='rgb(30,255,0)' </script>";
        } else if($mezzi<4 && $mezzi>0){
            $color=$yellow;
            $sql="UPDATE `grid` SET `rgb`='rgb(255,255,0)' WHERE cellaid = $i";
            mysqli_query($conn, $sql); 
            echo"<script> document.getElementById('$i').style.backgroundColor ='rgb(255,255,0)' </script>";
        }   else{   
            $color=$red;
            $sql="UPDATE `grid` SET `rgb`='rgb(255,0,0)' WHERE cellaid = $i";
            mysqli_query($conn, $sql); 
            echo"<script> document.getElementById('$i').style.backgroundColor ='rgb(255,0,0)' </script>";
        }
}   
?>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(".point1, .point2, .point3, .point4, .point5, .point6, .point7").click(function(event) {
    var itemid = $(this).attr("id");    

  $.ajax({
    type: 'post',
    url: "index.php",
    data: {
      'itemid': itemid
    }, 
    cache: false,
    async: true,
    dataType: 'json',
    success: function(data) {
      if(data.result == "success"){
        console.log("Success", data.itemid);
      } else {
        console.log("Failed", data);
      }
    }
  });
});
</script>
<?php       
	
		echo "<script type='text/javascript'>\r\n";
		echo "$('.point1, .point2, .point3, .point4, .point5, .point6, .point7').click(function(event) {\r\n";
        echo "\talert('itemid');\r\n";
        echo "\tvar itemid = event.target.id;\r\n";
        echo "});\r\n";
		echo "</script>";


    if(isset($_SESSION['id'])){
        if (isset($_SESSION['LAST_ACTIVITY']) && (time() - $_SESSION['LAST_ACTIVITY'] > 120)) {
                    session_unset();     // unset $_SESSION variable for the run-time 
                    session_destroy();   // destroy session data in storage
                    header("Location: index.php");
        }

        $_SESSION['LAST_ACTIVITY'] = time();        
		
		echo "<script type='text/javascript'>\r\n";
        echo "&nbsp;&nbsp;&nbsp;Inserisci qui il n°di Bici da prenotare <input type='number' id='bicidapren' method='post'>&nbsp;&nbsp;&nbsp;Inserisci qui il n°di Moto da prenotare <input type='number' id='motodapren' method='post'> <button id='tryit' onclick='myFunction()'>Confirm</button>";
        echo "function myFunction() {\r\n";
        echo "\tBicidaprenotare = parseInt(document.getElementById('bicidapren').value)-1;\r\n";
        echo "\tMotodaprenotare = parseInt(document.getElementById('motodapren').value)-1;\r\n";
        echo "}\r\n";
        echo "</script>";
        }
?>
</body>
</html>

2 个答案:

答案 0 :(得分：0)

请考虑以下内容。

JavaScript 

$("[class*='point']").click(function(e) {
  var itemid = $(this).attr("id");  

  $.ajax({
    type: 'post',
    url: "index.php?",
    data: {
      'itemid': itemid
    }, 
    cache: false,
    async: true,
    dataType: 'json',
    success: function(data) {
      if(data.result == "success"){
        console.log("Success", data.itemid);
      } else {
        console.log("Failed", data);
      }
    }
  });
});

PHP 

<?php
$d = array();
if(isset($_POST['itemid'])){
  $d['result'] = "success";
  $d['itemid'] = (int)$_POST['itemid'];
} else{
  $d['result'] = "error";
  $d['error'] = "'itemid' was not set.";
}
header('Content-Type: application/json');
echo json_encode($d);
?>

在很多情况下，最好将JSON数据传回。 JavaScript更易于处理。因此，我们构建了一个数据数组，我们希望将其传递回AJAX请求并将其编码为JSON。

当我们发布AJAX帖子时，PHP将获得成功的响应。欢迎您发现错误，发生这种情况的原因是PHP调用中的400或500状态。您还可以在Web控制台中看到它。

我们将要从PHP取回JSON对象：

{
  result: "success",
  itemid: 2
}

或者：

{
  result: "error",
  error: "'itemid' was not set."
}

在JavaScript中，我们可以使用点表示法来访问对象的元素。您也可以像这样访问它：

if(data['result'] == "success")

建议使用点符号。

更新1

在您的PHP文件中，您将需要其他结构。在将HTML呈现给浏览器之前，您将必须执行一些操作。

<?php
$d = array();
if(isset($_POST['itemid'])){
  if($_POST['itemid'] != ""){
    $itemid = (int)$_POST['itemid'];
  } else{
    $d['result'] = "error";
    $d['error'] = "'itemid' was not set.";
  }
  $d;
  // Connect to SQL
  // Query DB for Table Data ...WHERE itemId = '$itemid'
  // Store resultset to $d
  header('Content-Type: application/json');
  echo json_encode($d);
  exit();
}

if ( !empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off'){
  // La richiesta e' stata fatta su HTTPS
} else {
  // Redirect su HTTPS
  // eventuale distruzione sessione e cookie relativo
  $redirect = 'https://' . $_SERVER['HTTP_HOST'] .
  $_SERVER['REQUEST_URI'];
  header('HTTP/1.1 301 Moved Permanently');
  header('Location: ' . $redirect);
  exit();
}
?>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../style.css" type="text/css">
<?php
setcookie('test', 1, time()+3600);

if(!isset($_GET['cookies'])){
    include_once "../header.php";
    include_once "../grid.asp";
    include_once '../footer.php';
    include_once '../right_column.php';

    echo"<script type='text/javascript'></script>\r\n<noscript>JavaScript is off. Please enable to view full site.</noscript>";
} else {
    echo "No Cookies";
}
?>
<div class="map">
  <div class="point1" id="1"> </div>
  <div class="point2" id="2"> </div>
  <div class="point3" id="3"> </div>
  <div class="point4" id="4"> </div>
  <div class="point5" id="5"> </div>
  <div class="point6" id="6"> </div>
  <div class="point7" id="7"> </div>
</div> 
<?php
    $green='rgb(30,255,0)';     
    $yellow='rgb(255,255,0)';
    $red='rgb(255,0,0)';    

    include 'includes/dbhinc.php';

    for ($i = 1; $i <= 7; $i++) {   
        $sql="SELECT nummot, numbici FROM grid WHERE cellaid='$i'";
        $result=mysqli_query($conn, $sql);
        $row = mysqli_fetch_assoc($result);
        $moto=$row["nummot"];
        $bici=$row["numbici"];

        $mezzi=$moto+$bici;

        if($mezzi>=4){
            $color=$green;
            $sql="UPDATE `grid` SET `rgb`='rgb(30,255,0)' WHERE cellaid = $i";
            mysqli_query($conn, $sql); 
            echo "<script> document.getElementById('$i').style.backgroundColor ='rgb(30,255,0)' </script>";
        } else if($mezzi<4 && $mezzi>0){
            $color=$yellow;
            $sql="UPDATE `grid` SET `rgb`='rgb(255,255,0)' WHERE cellaid = $i";
            mysqli_query($conn, $sql); 
            echo"<script> document.getElementById('$i').style.backgroundColor ='rgb(255,255,0)' </script>";
        }   else{   
            $color=$red;
            $sql="UPDATE `grid` SET `rgb`='rgb(255,0,0)' WHERE cellaid = $i";
            mysqli_query($conn, $sql); 
            echo"<script> document.getElementById('$i').style.backgroundColor ='rgb(255,0,0)' </script>";
        }
}   
?>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(".point1, .point2, .point3, .point4, .point5, .point6, .point7").click(function(event) {
    var itemid = $(this).attr("id");    

  $.ajax({
    type: 'post',
    url: "index.php?",
    data: {
      'itemid': itemid
    }, 
    cache: false,
    async: true,
    dataType: 'json',
    success: function(data) {
      if(data.result == "success"){
        console.log("Success", data.itemid);
      } else {
        console.log("Failed", data);
      }
    }
  });
});
</script>
<?php       
    if(isset($_SESSION['id'])){
        if (isset($_SESSION['LAST_ACTIVITY']) && (time() - $_SESSION['LAST_ACTIVITY'] > 120)) {
                    session_unset();     // unset $_SESSION variable for the run-time 
                    session_destroy();   // destroy session data in storage
                    header("Location: index.php");
        }

        $_SESSION['LAST_ACTIVITY'] = time();        

        echo "&nbsp;&nbsp;&nbsp;Inserisci qui il n°di Bici da prenotare <input type='number' id='bicidapren' method='post'>&nbsp;&nbsp;&nbsp;Inserisci qui il n°di Moto da prenotare <input type='number' id='motodapren' method='post'> <button id='tryit' onclick='myFunction()'>Confirm</button>";
        echo "<script type='text/javascript'>\r\n";
        echo "$('.point1, .point2, .point3, .point4, .point5, .point6, .point7').click(function(event) {\r\n";
        echo "\talert('itemid');\r\n"
        echo "\tvar itemid = event.target.id;\r\n";
      echo "});\r\n";   
        echo "function myFunction() {\r\n";
        echo "\tBicidaprenotare = parseInt(document.getElementById('bicidapren').value)-1;\r\n";
        echo "\tMotodaprenotare = parseInt(document.getElementById('motodapren').value)-1;\r\n";
        echo "}\r\n";
        echo "</script>";
        }
?>
</body>
</html>

希望这会有所帮助。

答案 1 :(得分：0)

这是对您有用的。如果不起作用，请共享您的整个代码以及PHP的响应。

// jQuery AJAX call should be something like this
$.ajax({
    url: 'index.php',
    data: {
        "itemid": itemid
    },
    type: "post",
    dataType: "json",
    success: function(json) {
        if(json.success) {
            alert("Item ID is " + json.itemid);
        } else {
            alert("Item ID is " + json.itemid);
        }
    },
    error: function(jqXHR, textStatus, errorThrown) {
        alert("Error :: " + textStatus + " :: " + errorThrown);
    }
});


// PHP code can be like this
if(isset($_POST['itemid'])){
    $itemid = $_POST['itemid'];
    echo json_encode(['success' => true, 'itemid' => $itemid]);
} else {
    echo json_encode(['success' => false, 'itemid' => 'Not available']);
}
相关问题
最新问题