AJAXサブミットの結果が表示されない

Question

ユーザーがユーザー名を入力できるフォームがあり、それに対応するIDが表示されます。私はAJAXを使ってデータを提出し、ページを更新せずに結果（ID）を表示しています。

コンソールにエラーは表示されませんが、フォームの送信後にIDが表示されません。

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

ご入力のこのライン

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

名前がある場合はより良いでしょう name属性は、JavaScriptの要素を参照するために、またはフォームが送信された後にフォームデータを参照するために使用されます。

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

と あなたの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)     
     } 
    }); 
    }); 
}); 

AJAXのコードでは、あなたが持っている、

、何をやったことは2つの文字列を連結しているjQueryの構文に違反する

data: "username=" + username 

、 "username"と入力＃usernameの値。 usernameは、その入力

この1、success: $("#resulthere").html(event)も構文に違反しながら、さらに読書のための

からの値であるのに対し

data : { 
'username':username 
}, 

'username' は、あなたがこのドキュメントhttp://api.jquery.com/jquery.ajax/を参照することができ、入力された名前です

Answer 2

だけ変更

機能（データ）{$（ "＃のresulthere"）HTML（データ）。} `