使用AJAX速记在jQuery和PHP之间传递变量数据

我正在尝试创建一个搜索功能，根据用户输入的条件搜索数据库。现在，我只是想把jQuery变量数据输入PHP。我决定使用速记AJAX$.post方法，因为这只是一个演示项目。我知道有很多类似的问题，但我还没有找到一个答案，我可以使用它们中的任何一个

因此，我试图做的是，用户将单击下拉菜单并选择一个选项。AJAX然后将所选值发送到PHP文件，PHP最终将根据所选内容执行数据库搜索。问题是，在PHP中，当解析数据并回显它时，我会得到一个搜索字符串，但当我对发送的变量执行控制台日志时，我会得到正确的文本。谁能告诉我哪里出了问题

这是我到目前为止所拥有的。 阿贾克斯

PHP

HTML

应要求

这里是一个下拉菜单的小提琴来显示它是如何工作的。

我建议使用文档检查下拉列表中的更改

$( "select" ).change(function () {
  $( "select option:selected" ).each(function() {
    $.post("../php/test.php", {search: $(this).text()}, function(data){
      jsonData = window.JSON.parse(data);
    });
  });
})

---

您在PHP端获得搜索，因为这是submit按钮的值

您希望在单击某个选项时发布帖子吗？尝试按如下方式调整选择器：

$("#searchBy .option").on("click", function () {
    var search = $(this).text().trim();
    $.post("../php/test.php", { search: search }, function (data) {
        jsonData = window.JSON.parse(data);
    })
});

我认为您的header.php引发了错误。我用你的代码自己创建了一个测试文件，效果非常好：

<?php
    if($_POST)
    {
        ob_start();
        //require("../includes/header.php");
        $criteria = $_POST["search"];
        ob_clean();
        echo json_encode($criteria);
        exit;
    }
?>
<fieldset id="search_by">
    <div class="select" name="searchBy" id="searchBy">
        <p>Search By...</p>
        <div class="arrow"></div>
        <div class="option-menu">
            <div class="option">Airport Identifier</div>
            <div class="option">Top Rated</div>
            <div class="option">Instructor</div>
            <div class="option">Malfunctions/Maneuvers</div>
        </div>
    </div>
    <input type="text" name="search_text" id="search_text" />
    <input type="submit" name="search" id="search" class="button" value="Search" />
</fieldset>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>

    $("#searchBy").on("click", ".option", function(){
        var search = $(this).text();
        $.post("<?=$_SERVER['PHP_SELF']?>", {search: search}, function(data){
            jsonData = window.JSON.parse(data);
            console.log(jsonData); //Prints the correct string
        })
    });

</script>

---

正在通过默认表单提交提交您的表单；ajax调用放错了位置，它应该在提交处理程序中，这将阻止默认表单提交

注意，我已经从提交按钮中删除了name和id属性；你不需要它们。只需让submit按钮完成它的工作，并在表单上侦听submit事件，然后使用event.preventDefault；为了确保表单不提交，您可以调用ajax

$searchBy.onclick、.option、函数{ $'search'.val$this.text； }; $'form'。在'submit'上，函数E{ e、 防止违约； $.post../php/test.php，$this.serialize，functiondata{ //jsonData=window.JSON.parsedata； console.log数据； } }; 按…搜索

机场标识符 一流的 教练 故障/操作

---

因此，如果您执行console.logsearch；在var search=$this.text；之后；，你得到了预期的文本而没有搜索？@PatrickQ完全正确。但是当我做一个PHP回显时，我发现你在使用与下拉菜单相关的jQuery插件吗？如果是这样，查看呈现的HTML会很有帮助，而不仅仅是原始HTML。@PatrickQ，不，这是我自己创建的自定义HTML/CSS/jQuery下拉列表，没有呈现的HTML，主要是因为我不知道如何创建插件。听起来像是提交元素被提交了。提交元素是否在提交的数据中显示，或者是否有另一个名称为search且值为search的元素？为了验证，您是否可以将提交值更改为“立即搜索”，并确认数据值是否也更改了。如果是这样的话，表单将被提交，而不是ajax。实际上，通过这种方式，我得到了同样的结果。如果需要的话，标题仅保存站点的模板、外部脚本、外部样式表和数据库连接信息。这不应该引起问题。正如我所说的，控制台已经在打印正确的字符串，使用这种方法仍然得到相同的结果的是PHP echo。我希望PHP端的帖子在用户点击提交按钮时出现。为什么它会返回按钮的值呢？我在控制台日志中得到一个空值。越来越近了。请在$.post回调和您的PHP脚本中进行建议的更改。我尝试了更新的答案，但没有给我null，而是得到了一个空字符串。我正在编辑我的问题以反映我所做的。这是因为我重命名搜索的文本框可能是空的。您是否在click hander$'search'.val$this.text；在单击提交之前，您是否在文本框中看到单击的文本？没问题。一旦你验证了所有这些，为了其他可能有类似问题的人，请随意接受答案。享受：

$( "select" ).change(function () {
  $( "select option:selected" ).each(function() {
    $.post("../php/test.php", {search: $(this).text()}, function(data){
      jsonData = window.JSON.parse(data);
    });
  });
})

$("#searchBy .option").on("click", function () {
    var search = $(this).text().trim();
    $.post("../php/test.php", { search: search }, function (data) {
        jsonData = window.JSON.parse(data);
    })
});

<?php
    if($_POST)
    {
        ob_start();
        //require("../includes/header.php");
        $criteria = $_POST["search"];
        ob_clean();
        echo json_encode($criteria);
        exit;
    }
?>
<fieldset id="search_by">
    <div class="select" name="searchBy" id="searchBy">
        <p>Search By...</p>
        <div class="arrow"></div>
        <div class="option-menu">
            <div class="option">Airport Identifier</div>
            <div class="option">Top Rated</div>
            <div class="option">Instructor</div>
            <div class="option">Malfunctions/Maneuvers</div>
        </div>
    </div>
    <input type="text" name="search_text" id="search_text" />
    <input type="submit" name="search" id="search" class="button" value="Search" />
</fieldset>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>

    $("#searchBy").on("click", ".option", function(){
        var search = $(this).text();
        $.post("<?=$_SERVER['PHP_SELF']?>", {search: search}, function(data){
            jsonData = window.JSON.parse(data);
            console.log(jsonData); //Prints the correct string
        })
    });

</script>