javascript - 使用 $.post 自动完成功能未按预期工作

Question

使用this commadelimited autocomplete我创建了一个 php 文件来从我的 MySQL 数据库获取一些值，创建的 php 脚本如下

<?php
$connection = mysql_connect("my_host", "usr", "pwd"); // Establishing connection with server..
$db = mysql_select_db("appdb", $connection); 
$wid =$_POST['wid1'];
$result = mysql_query("select * from shop where wid=$wid");
$to_encode = array();
$data = mysql_num_rows($result);
if ($data > 0){
    while($row = mysql_fetch_assoc($result)) {
  $to_encode[] = $row;
}
echo json_encode($to_encode);
}
else{
    echo "No Shops Available, Contact Your Wholesaler !!";
}
mysql_close ($connection); // Connection Closed.
?>

我在 JavaScript 中创建了一个函数来将值提取到变量中

$.post("http://theurl.com/app/get_shopname.php",{ wid1:10},
function(shopnames){
if(shopnames=='No Shops Available, Contact Your Wholesaler !!'){
$('input[type="text"],input[type="searchField"]').css({"border":"2px solid red","box-shadow":"0 0 3px red"});
alert(shopnames);
}else{

var availableTags = shopnames;
}
    }


    );

$("#searchField").autocomplete({
    target: $('#suggestions'),
    source: availableTags,
    link: 'target.html?term=',
    minLength: 1
});

问题是，当点击 $.post("http://theurl.com/app/get_shopname.php"时，它不会进入 function(shopnames) 函数。 .它只是传递给下一个函数

Answer 1

1. 将 $_POST 更改为 $_GET 以进行测试
2. 在浏览器中加载 URL http://theurl.com/app/get_shopname.php?wid1=10 并查看它返回正确的 JSON
3. 改回 $_POST 并在 echo 之前的某处添加 header("Content-type: application/json");
4. 确保在获得数据之前不要调用自动完成事件处理程序

类似这样的事情:

$(function) { // when page loads 
  var wid = "<?PHP echo $wid; ?>"; // for example
  $.post("http://theurl.com/app/get_shopname.php", { wid1: wid },
    function(shopnames) {
      if (shopnames == 'No Shops Available, Contact Your Wholesaler !!') {
        $('input[type="text"],input[type="searchField"]').css({
          "border": "2px solid red",
          "box-shadow": "0 0 3px red"
        });
      } else {
        var availableTags = [];
        $(shopnames).each(function(i,tag) {
          availableTags.push(tag.shopname);
        });
        $("#searchField").autocomplete({
          target: $('#suggestions'),
          source: availableTags,
          link: 'target.html?term=',
          minLength: 1
        });
    });
});