Question

我有这段代码

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  .ui-autocomplete-loading {
    background: white url('images/ajax-loader.gif') right center no-repeat;
  }
  #city { width: 25em; }
  </style>
  <script>
  $(function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }

    $( "#city" ).autocomplete({
      source: function( request, response ) {
        $.ajax({
          url: "http://localhost/file.php",
          dataType: "jsonp",
          data: {
            featureClass: "P",
            style: "full",
            maxRows: 12,
            name_startsWith: request.term
          },
          success: function( data ) {
            response( $.map( data.geonames, function( item ) {
              return {
                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                value: item.name
              }
            }));
          }
        });
      },
      minLength: 2,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.label :
          "Nothing selected, input was " + this.value);
      },
      open: function() {
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
      },
      close: function() {
        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
      }
    });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="city"></label>
  <input id="city" />
</div>

</body>
</html>

file.php的PHP代码

<?php echo $_GET['name_startsWith']; ?>

现在，我想通过ajax动态使用数据库来获取数据。现在，当我运行此代码时，我得不到任何响应＆amp; ajax loader的图像不断显示。

我怎样才能让它发挥作用？

由于

Answer 1

使用FireBug或DevTools检查服务器响应。您还可以在AJAX调用上实现error（）和/或complete（）方法。在这些方法中，您可以检查参数以查看引发的任何错误。

Answer 2

首先，您使用的是file.php，因此数据类型与dataType: "jsonp"不同使用它你需要做出改变

我不确定它会对您有所帮助，但是如果您可以管理json中php文件的响应，例如

    {
    "employees": [
        {
            "firstName": "John",
            "lastName": "Doe"
        },
        {
            "firstName": "Anna",
            "lastName": "Smith"
        },
        {
            "firstName": "Peter",
            "lastName": "Jones"
        }
    ]
}

那么你可以像这样使用它

  var data_of_ajax = $.ajax({
        type: 'POST',       
        url: "http://localhost/file.php",
        data: {
        featureClass: "P",
        style: "full",
        maxRows: 12,
        name_startsWith: request.term
        },
        dataType: 'html',
        context: document.body,
        global: false,
        async:false,
        success: function(data) {
            //alert(data);
            return data;
        }
    }).responseText;
    data_of_ajax = $.parseJSON(data_of_ajax);

现在你在变量data_of_ajax

中得到了json

您可以在自动完成

中使用它

$( "#city" ).autocomplete({
  source: data_of_ajax,
  minLength: 2,
  // your code
});

使用ajax进行jquery自动完成

2 个答案: