0

我有这个代码

<!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 使用数据库动态获取这里的数据。现在，当我运行此代码时，我没有得到任何响应，并且 ajax 加载程序的图像不断显示。

我怎样才能让它工作？

谢谢

4

2 回答 2

0

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

于 2013-05-23T06:33:36.013 回答
0

首先你正在使用file.php所以数据类型不是这样dataType: "jsonp" 使用它你需要进行更改

我不确定它是否会帮助你，但如果你可以管理phpjson 中文件的响应，例如这样

    {
    "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);

现在你在变量中得到 jsondata_of_ajax

你可以在自动完成中使用它

$( "#city" ).autocomplete({
  source: data_of_ajax,
  minLength: 2,
  // your code
});
于 2013-05-23T07:05:34.530 回答