Question

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

无论出于何种原因，都没有数据附加到URL。我尝试了各种各样的事情但没有成功。我试图将数据发送到同一页面（index.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");
});

这是我用index.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，但它仍未在index.php中回显。

Answer 1

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

Answer 2

无论出于何种原因，都没有数据被附加到URL。

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

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

Answer 3

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

最后请注意，您没有返回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']));
    }
?>

Answer 4

使用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);
    }
  });

作为回应，您可以通过提醒获取数据，这样您就可以了解相同的信息。

Answer 5

这可以让您在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");
});

在index.php中

<?php

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

Answer 6

从dataType: 'json',删除AJAX。就是这样。

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

来自manual：

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

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

Ajax帖子没有将数据附加到URL

6 个答案: