Les résultats de la soumission AJAX ne sont pas affichés

Question

J'ai un formulaire où un utilisateur peut taper un nom d'utilisateur et l'ID correspondant sera affiché. J'utilise AJAX pour soumettre les données et afficher le résultat (l'ID) sans rafraîchir la page.

Je ne reçois aucune erreur dans la console, mais aucun identifiant ne s'affiche après l'envoi du formulaire.

HTML :

<form method="post" id="form">
    <input type="text" id="username">
    <input type="submit">
<form>

<div id="resulthere"></div> <!-- where the ID is supposed to be displayed -->

AJAX/JQuery :

<script>
$(document).ready(function(){
    $("form#form").submit(function(event) {
        event.preventDefault();
        var username = $("#username").val();

        $.ajax({
            type: "POST",
            url: "result.php",
            data: "username=" + username,
            success: $("#resulthere").html(event)
        });
    });
});
</script>

PHP (results.php) :

<?php
if(!empty($_POST['username'])) { // checks to make sure the username isn't empty
    $json = file_get_contents('http://example.com?username='.$_POST['username']); 
    $json2 = json_decode($json); 
    $id = $json2->ID; // gets the ID
    echo $id; // displays the ID
}
?>

Answer 1

Cette ligne de votre entrée

<input type="text" id="username">

ce serait mieux s'il avait un nom, L'attribut name est utilisé pour référencer des éléments dans un JavaScript, ou pour référencer des données de formulaire après l'envoi de ce dernier.

<input type="text" name="username" id="username">

et faites ceci dans votre jquery

$(document).ready(function(){
  $("form#form").submit(function(event) {
    event.preventDefault();
    var username = $("#username").val();

    $.ajax({
      type: "POST",
      url: "result.php",
      data: { "username": username },
      success: function (result) {
        $("#resulthere").html(result)                   
      }
    });
  });
});

Dans le code d'ajax, vous avez,

data: "username=" + username

ce qui viole la syntaxe jquery, ce que vous avez fait est de concaténer les deux chaînes, "username" et la valeur de input#username.

data : {
 'username':username
},

'username' est un nom d'entrée, tandis que username est la valeur de cette entrée

alors que celui-là, success: $("#resulthere").html(event) violent également la syntaxe,

Pour plus d'informations, vous pouvez vous référer à la documentation suivante http://api.jquery.com/jquery.ajax/

Answer 2

Changez juste

data: "username=" + username,

à

data: { "username" : username },