计数按钮将带有纯 javascript Ajax 的当前页面 URL 传递给 php 变量

Question

我尝试使用纯 javascript Ajax将当前页面 URL ( window.location.href)传递给php 变量。我究竟做错了什么？ $_REQUEST['url']

计数器.js：

'use strict';

let clicks = document.querySelectorAll('.Counter-trigger'); // IE8

let voted = localStorage.getItem('voted');

let message = document.getElementById('Counter-message');

let count = document.getElementById('Counter-count');

let i;

let url;

let post;

let xhr;

for (let i = 0; i < clicks.length; i++) {

  clicks[i].onclick = function () {

    if (voted == 'voted') {

      message.innerHTML = "Sorry, ...!!";

    } else {

      let url = window.location.href;

      let post = url; // post string

      let xhr = new XMLHttpRequest();

      xhr.open('POST', './lib/Counter/CounterReq.php', true);

      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

      xhr.onreadystatechange = function () {

        if (xhr.readyState != 4 || xhr.status != 200) return;

        console.log(xhr.responseText);

        message.innerHTML = "Thanks!!";

        count.innerHTML = +count.textContent+1;

      };

      xhr.send(post);

      localStorage.setItem('rate', 'voted');

      voted = 'voted';

    }

  }

}

CounterReq.php

$url = $_REQUEST['url']; // posted from page

$origin = $_SERVER['DOCUMENT_ROOT'].parse_url($url,PHP_URL_PATH);

$file = '_Counter.txt'; // counts is saved in this document

$file_path = $origin.'_Counter.txt'; // counts is saved here

$count = file_get_contents($file_path);

if ($count == null){$count = 0; echo $count;

}

$count++; // increment count by 1

$handle = fopen($file_path, "w+");

flock($handle,LOCK_EX); // LOCK_EX (2) exclusive locking for write access

fwrite($handle, $count);

flock($handle,LOCK_UN); // LOCK_EX (3) Releases a lock

fclose($handle); // close file

Answer 1

注意：未定义的索引：第 5 行 /var/www/dist/lib/Counter/CounterReq.php 中的 url该通知意味着您正在寻找不存在的关联数组中的索引。让我们解决这个问题。将要发送的数据存储在FormData对象中。let url = window.location.href;const data = new FormData()data.set('url', url);将您的“内容类型”修改为'multipart/form-data'或将其全部删除。实例将FormData自动设置正确的标头。xhr.setRequestHeader('Content-Type', 'multipart/form-data');在方法中将数据发送到服务器.send。xhr.send(data);使用$_POST全局数组而不是$_GET，您正在通过该POST方法发送数据，因此它将在前者中。您发送到服务器的数据现在已作为关联数组进行处理。检查密钥是否url存在，如果存在则存储。$url = isset( $_POST['url'] ) ? $_POST['url'] : '';

Answer 2

您需要对要发送的变量进行urlencode并命名；将帖子更改为let&nbsp;post&nbsp;=&nbsp;'url='&nbsp;+&nbsp;encodeURIComponent(url);它应该可以正常工作。编辑：我没有注意到您使用的是_GET数组而不是_POST.&nbsp;正如另一个答案所说，也要进行更改。但是，没有必要使用 JSON；application/x-www-form-urlencoded工作也很好。