Ajax 帖子不将数据附加到 URL - Ajax post not appending data to URL

我正在尝试让我的搜索栏工作，但是我在 ajax 帖子中遇到了问题。

无论出于何种原因，都不会将任何数据追加到 URL。我尝试了各种事情都没有成功。我正在尝试将数据发送到同一页面（索引.php）。

这是我的jquery：

$(function(){
  $(document).on({
    click: function () {
      var tables = document.getElementsByTagName("TABLE");
      for (var i = tables.length-1; i >= 0; i-= 1) {
        if (tables[i]) tables[i].parentNode.removeChild(tables[i]);
      }
      var text = $('#searchBar').val();
      var postData = JSON.stringify({ searchTerm: text });
      $.ajax({
        type: 'POST',
        url: 'index.php',
        dataType: 'json',
        data: postData,
        success: function() {
          alert("Test");
        }
      });
    }
  }, "#searchButton");
});

这是我的索引.php的php：

<?php
    require('course.php');
    if(isset($_POST['searchTerm'])) {
        echo $_POST['searchTerm'];
    }
?>

无论我尝试什么，我都无法发布任何内容。我已经检查了chrome中的网络选项卡，但没有看到任何表明它正常工作的内容。

有什么想法吗？

编辑：

我已经将我的代码更改为这个，似乎我越来越近了：

$(document).on({
  click: function () {
    $("TABLE").remove()
    var text = $('#searchBar').val();
    $.ajax({
      type: 'GET',
      url: 'index.php',
      dataType: 'text',
      data: { searchTerm: text },
      success: function() {
        alert("Test");
      }
    });
  }
}, "#searchButton");

和：

<?php
  require('course.php');
  if(isset($_GET['searchTerm'])) {
    echo $_GET['searchTerm'];
  }
?>

现在我按预期得到了?searchTerm=theTextIEnter，但是它仍然没有在索引.php中得到回声。

不要使用 JSON.stringify() 将对象转换为字符串。传递给$.ajax data必须是对象，而不是 JSON。

无论出于何种原因，都不会将任何数据追加到 URL。

您正在发出开机自检请求。POST 数据在请求正文中发送，而不是在 URL 的查询字符串组件中发送。

如果将其更改为GET请求（并在正确的位置检查它，即浏览器开发人员工具的"网络"选项卡，而不是浏览器的地址栏），那么您将在查询字符串中看到数据。

这将

适用于您在代替data:postData中使用data: { postData }，您将收到$_POST['postData']

中的数据

$(function(){
  $(document).on({
    click: function () {
      var tables = document.getElementsByTagName("TABLE");
      for (var i = tables.length-1; i >= 0; i-= 1) {
        if (tables[i]) tables[i].parentNode.removeChild(tables[i]);
      }
      var text = $('#searchBar').val();
      var postData = JSON.stringify({ 'searchTerm' : text });
      $.ajax({
        type: 'POST',
        url: 'index.php',
        dataType: 'json',
         data: { postData },
         success: function(data) {
          alert(data.searchTerm);
        }
      });
    }
  }, "#searchButton");
});

在索引中.php

<?php
    if(isset($_POST['postData'])) {
        echo $_POST['postData'];
        die;
    }
?>

如果你想通过URL发送数据，你必须使用GET请求。为此，请将请求的type更改为 GET，并将对象直接提供给 jQuery 中的 data 参数，并在 PHP 中使用 $_GET 而不是 $_POST。

最后请注意，您返回的不是 JSON - 您返回的是文本。如果要返回 JSON，请使用 json_encode 并获取 success 处理程序函数参数中的值。

试试这个：

$(document).on({
    click: function () {
        $('table').remove();
        $.ajax({
            type: 'GET',
            url: 'index.php',
            dataType: 'json',
            data: { searchTerm: $('#searchBar').val() },
            success: function(response) {
                console.log(response.searchTerm);
            }
        });
    }
}, "#searchButton");

<?php
    require('course.php');
    if(isset($_GET['searchTerm'])) {
        echo json_encode(array('searchTerm' => $_GET['searchTerm']));
    }
?>

从AJAX中删除dataType: 'json',。仅此而已。

您的响应类型不是JSON，但通过设置dataType: 'json'您暗示它是。因此，当响应中未检测到 JSON 时，不会将任何内容发送回方法处理程序。通过删除dataType它允许 API 根据您在响应中返回的数据，就响应类型做出明智的决定。否则，您可以将dataType设置为"文本"或"html"，它将起作用。

从手册：

数据类型
：您希望从服务器返回的数据类型。

这不是您要发送/发布的数据类型，而是您期望返回的数据类型。在您的index.php文件中，您不会发回任何JSON。这就是为什么success()方法不令人满意的原因。始终将dataType设置为响应中期望返回的数据类型。

带有 POST 请求：

请在代码中注释以下行：

//var postData = JSON.stringify({ searchTerm: text });

并使用以下 ajax 代码获取后数据：

$.ajax({
    type: 'POST',
    url: 'index.php',
    dataType: 'json',
    data: { searchTerm: text },
    success: function() {
      alert("Test");
    }
  });

使用 GET 请求：

您可以将数据转换为查询字符串参数，并以这种方式将它们传递给服务器。

 $.ajax({
    type: 'GET',
    url: 'index.php?searchTerm='+text,
    dataType: 'json',
    success: function(response) {
      alert(response);
    }
  });

作为响应，您可以使用警报获取数据，因此您可能会了解相同的情况。