Javascript jQuery AJAX自动完成在尝试使其动态化时不起作用

我有我的自动完成工作良好，如果有硬编码的数据被送入它。我的PHP正在返回一个JSON结果。我不确定我会错在哪里

HTML

PHP

我想这是我jQuery中的一行：

data:{action:'autocomplete_to_user'，query:query}，

可能我有语法问题。

根据，

dataType:'json'

将响应计算为json并返回一个JavaScript对象

在将数据发送到PHP之前，需要使用

JSON.stringify（{action:'autocomplete\u to\u user'，query:query}）对数据进行字符串化。此外，还需要添加标题
内容类型：“application/json”
，告诉PHP代码请求数据是json。您可以通过在Ajax设置中添加
contentType:'application/json'
来实现这一点

最终的jQuery代码如下所示：

$('.typeahead').typeahead({
  source: function(query, result)
  {
   $.ajax({
    url: 'scripts/order_messaging.php',
    method: 'POST',
    data: JSON.stringify({action: 'autocomplete_to_user', query:query}),
    contentType: 'application/json',
    dataType: 'json',
    success:function(data)
    {
     result($.map(data, function(item){
      return item;
     }));
    }
  })
 }
});

<?php
    // Read the input stream
    $body = file_get_contents("php://input");

    // Decode the JSON object
    $object = json_decode($body, true);
    //autocomplete user name for user_to
    if ( $object ['action'] == 'autocomplete_to_user' ) {
        $stmt = $pdo->prepare('select * from login where username like :query');
        $stmt->bindValue('query', '%'.$object['query'].'%');
        $stmt->execute();
        $result = array();
        while($user_name = $stmt->fetch(PDO::FETCH_OBJ)) {
            array_push($result, $user_name->username);
        }
        echo json_encode($result);
    }
?>


有关模式的详细信息，请参阅。
希望这有帮助

编辑：

您需要更新PHP代码以读取JSON。请参考这个。
您的PHP代码应该如下所示：

$('.typeahead').typeahead({
  source: function(query, result)
  {
   $.ajax({
    url: 'scripts/order_messaging.php',
    method: 'POST',
    data: JSON.stringify({action: 'autocomplete_to_user', query:query}),
    contentType: 'application/json',
    dataType: 'json',
    success:function(data)
    {
     result($.map(data, function(item){
      return item;
     }));
    }
  })
 }
});

<?php
    // Read the input stream
    $body = file_get_contents("php://input");

    // Decode the JSON object
    $object = json_decode($body, true);
    //autocomplete user name for user_to
    if ( $object ['action'] == 'autocomplete_to_user' ) {
        $stmt = $pdo->prepare('select * from login where username like :query');
        $stmt->bindValue('query', '%'.$object['query'].'%');
        $stmt->execute();
        $result = array();
        while($user_name = $stmt->fetch(PDO::FETCH_OBJ)) {
            array_push($result, $user_name->username);
        }
        echo json_encode($result);
    }
?>



根据，
数据类型：“json”
将响应评估为json并返回一个JavaScript对象

在将数据发送到PHP之前，需要使用
JSON.stringify（{action:'autocomplete\u to\u user'，query:query}）对数据进行字符串化。此外，还需要添加标题
内容类型：“application/json”
，告诉PHP代码请求数据是json。您可以通过在Ajax设置中添加
contentType:'application/json'
来实现这一点

最终的jQuery代码如下所示：

$('.typeahead').typeahead({
  source: function(query, result)
  {
   $.ajax({
    url: 'scripts/order_messaging.php',
    method: 'POST',
    data: JSON.stringify({action: 'autocomplete_to_user', query:query}),
    contentType: 'application/json',
    dataType: 'json',
    success:function(data)
    {
     result($.map(data, function(item){
      return item;
     }));
    }
  })
 }
});

<?php
    // Read the input stream
    $body = file_get_contents("php://input");

    // Decode the JSON object
    $object = json_decode($body, true);
    //autocomplete user name for user_to
    if ( $object ['action'] == 'autocomplete_to_user' ) {
        $stmt = $pdo->prepare('select * from login where username like :query');
        $stmt->bindValue('query', '%'.$object['query'].'%');
        $stmt->execute();
        $result = array();
        while($user_name = $stmt->fetch(PDO::FETCH_OBJ)) {
            array_push($result, $user_name->username);
        }
        echo json_encode($result);
    }
?>


有关模式的详细信息，请参阅。
希望这有帮助

编辑：

您需要更新PHP代码以读取JSON。请参考这个。
您的PHP代码应该如下所示：

$('.typeahead').typeahead({
  source: function(query, result)
  {
   $.ajax({
    url: 'scripts/order_messaging.php',
    method: 'POST',
    data: JSON.stringify({action: 'autocomplete_to_user', query:query}),
    contentType: 'application/json',
    dataType: 'json',
    success:function(data)
    {
     result($.map(data, function(item){
      return item;
     }));
    }
  })
 }
});

<?php
    // Read the input stream
    $body = file_get_contents("php://input");

    // Decode the JSON object
    $object = json_decode($body, true);
    //autocomplete user name for user_to
    if ( $object ['action'] == 'autocomplete_to_user' ) {
        $stmt = $pdo->prepare('select * from login where username like :query');
        $stmt->bindValue('query', '%'.$object['query'].'%');
        $stmt->execute();
        $result = array();
        while($user_name = $stmt->fetch(PDO::FETCH_OBJ)) {
            array_push($result, $user_name->username);
        }
        echo json_encode($result);
    }
?>


我已经测试了该库，您需要更改两件事才能使其正常工作

1） 您需要重新构造
源
参数。您给了它一个不受支持的AJAX回调。根据文档，它接受带有设置的数组或对象，因此AJAX需要这样定义：

$('.typeahead').typeahead({
  source: function(query, result)
  {
   $.ajax({
    url: 'scripts/order_messaging.php',
    method: 'POST',
    data: JSON.stringify({action: 'autocomplete_to_user', query:query}),
    contentType: 'application/json',
    dataType: 'json',
    success:function(data)
    {
     result($.map(data, function(item){
      return item;
     }));
    }
  })
 }
});

<?php
    // Read the input stream
    $body = file_get_contents("php://input");

    // Decode the JSON object
    $object = json_decode($body, true);
    //autocomplete user name for user_to
    if ( $object ['action'] == 'autocomplete_to_user' ) {
        $stmt = $pdo->prepare('select * from login where username like :query');
        $stmt->bindValue('query', '%'.$object['query'].'%');
        $stmt->execute();
        $result = array();
        while($user_name = $stmt->fetch(PDO::FETCH_OBJ)) {
            array_push($result, $user_name->username);
        }
        echo json_encode($result);
    }
?>


$（'.typeahead'）。typeahead({
资料来源：{
//源代码有一个“ajax”属性，您只需要在其中放置
//带有AJAX参数的对象（通常放在其中的对象）
//$.ajax（）调用）
阿贾克斯：{
url:'scripts/order_messaging.php'，
方法：“POST”，
数据：{
操作：“自动完成到用户”，
查询：查询，
},
数据类型：“json”，
路径：“”，
},
},
});

ajax
对象的
path
属性在这里是关键。它告诉
typeahead
函数在哪里查找AJAX操作返回的数据。由于您正在对一维值数组进行编码，因此需要将其设置为空字符串，这意味着您的数据位于响应的根中

例如，如果要返回一个类似
echo json_encode（['users'=>$result]）的数组
然后您必须将路径设置为
'users'
（因为这是响应中保存数据的索引）

2） 您必须遵循严格的HTML结构才能使其正常工作：



如果您遗漏了这些元素中的任何一个，它不会触发功能。这个HTML结构是他们在文档中提到的第一件事。
我已经测试了这个库，您需要更改两件事才能使它工作

1） 您需要重新构造
源
参数。您给了它一个不受支持的AJAX回调。根据文档，它接受带有设置的数组或对象，因此AJAX需要这样定义：

$('.typeahead').typeahead({
  source: function(query, result)
  {
   $.ajax({
    url: 'scripts/order_messaging.php',
    method: 'POST',
    data: JSON.stringify({action: 'autocomplete_to_user', query:query}),
    contentType: 'application/json',
    dataType: 'json',
    success:function(data)
    {
     result($.map(data, function(item){
      return item;
     }));
    }
  })
 }
});

<?php
    // Read the input stream
    $body = file_get_contents("php://input");

    // Decode the JSON object
    $object = json_decode($body, true);
    //autocomplete user name for user_to
    if ( $object ['action'] == 'autocomplete_to_user' ) {
        $stmt = $pdo->prepare('select * from login where username like :query');
        $stmt->bindValue('query', '%'.$object['query'].'%');
        $stmt->execute();
        $result = array();
        while($user_name = $stmt->fetch(PDO::FETCH_OBJ)) {
            array_push($result, $user_name->username);
        }
        echo json_encode($result);
    }
?>


$（'.typeahead'）。typeahead({
资料来源：{
//源代码有一个“ajax”属性，您只需要在其中放置
//带有AJAX参数的对象（通常放在其中的对象）
//$.ajax（）调用）
阿贾克斯：{
url:'scripts/order_messaging.php'，
方法：“POST”，
数据：{
操作：“自动完成到用户”，
查询：查询，
},
数据类型：“json”，
路径：“”，
},
},
});

ajax
对象的
path
属性在这里是关键。它告诉
typeahead
函数在哪里查找AJAX操作返回的数据。由于您正在对一维值数组进行编码，因此需要将其设置为空字符串，这意味着您的数据位于响应的根中

例如，如果要返回一个类似
echo json_encode（['users'=>$result]）的数组
然后您必须将路径设置为
'users'
（因为这是响应中保存数据的索引）

2） 您必须遵循严格的HTML结构才能使其正常工作：



如果您遗漏了这些元素中的任何一个，它不会触发功能。这种HTML结构是他们在文档中首先提到的内容之一。
在我看来，有一些错误。例如，在中，特别是示例国家v2

POST请求将与数据一起发送
myKey:myValue

实际上，示例中发送的请求是
GET
，因为它取决于
第一个源的
ajax
对象的
类型
键（本例中为国家），该键未设置，因此默认为
GET

因此，也就是说，您真的应该坚持建议的HTML结构（至少从它开始，然后逐渐拿走您不想要的东西，只要它允许）

HTML

依我拙见，HIH有一些e