Liste entrainant la modification d'un champs autocomplété

Bonjour,

J'ai créé un code pour qu'un utilisateur choisisse un pays et qu'en fonction de ce choix, un champs de ville permette une auto-complétion appropriée. Par exemple en choisissant France, les villes françaises seulement seront éligibles pour l'auto-complétion qui suivra.
Mon problème se situe sur le retour de données de la page PHP appelée, (pour le moment, elle envoi juste deux noms de villes pour simplifier). Je ne vois pas comment récupérer le retour dans un tableau Javascript. Ce tableau permet, grâce à Jquery de lancer l'auto-complétion.

Voici mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="fr">
<meta charset="utf-8" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<?php
?>
  <script>
    $(function() {
      $("#idPays").on("change", function() {
        alert('pays changement');
        var idPays = $("#idPays").val();
        if (idPays != 0) {
          $.ajax({
            type: "POST",
            url: "page_genevilles.php",
            data: {
              "idPays": idPays
            },
            success: function(responseData) {
              alert(responseData);
              liste_villes_dispo = responseData;
              $("#villes").autocomplete({
                source: liste_villes_dispo
              });
              return;
            },
            error: function(XMLHttpRequest, textStatus, errorThrow) {
              console.log("Error: " + XMLHttpRequest.status);
              return;
            }
          });
        }
      });
    });
  </script>
  </head>
  <body>
    <select id="idPays">
      <?php
                        include('connexion_bdd.php');?>
        <option value="0">--- Pays ---</option>
        <?php                                   
        $query = mysql_query("SELECT ID_Pays, nom_pays_fr FROM Liste_Pays");
        while ($back = mysql_fetch_assoc($query)) {
          echo "\t\t\t\t<option value=\"" . $back['ID_Pays'] . "\">" . $back['nom_pays_fr'] . "</option>\n";
        }
        mysql_close();                  
        ?>
    </select>
    </span>
    </td>
    <td> <span id="boxDepartement"></span> </td>
    <td>Villes:</td>
    <td>
      <div class="ui-widget">
        <input id="villes"> </div>
      </p>
    </td>
    </tr>
    </tbody>
    </table>
    <center>
      <input type="submit" value="Lancer la recherche">
      <center>
        </form>
      </center>
<?php
?>

Et la page PHP minimale (pour le moment):

Code:

1
2
3
<?php
echo '["lyon","paris"];';
?>

Lorsque je lance la page, dans la console, je vois apparaitre: GET http://....../%5B%22lyon%22,%22paris%22%5D; [HTTP/1.1 404 Not Found 208ms]

Je vous remercie d'avance de l'aide que vous voudrez bien m'apporter.