2016-07-15 45 views
2

我有一個表單,用戶可以輸入用戶名並顯示與其對應的ID。我使用AJAX提交數據並顯示結果(ID)而不刷新頁面。來自AJAX提交的結果未顯示

我在控制檯中沒有收到任何錯誤,但在提交表單後沒有顯示任何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 
} 
?> 
+2

'成功:功能(數據){$( 「#resulthere」)HTML(數據)。}' – mplungjan

回答

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)     
     } 
    }); 
    }); 
}); 

在阿賈克斯的代碼,你有,

data: "username=" + username 

違反了jQuery語法,你所做的是將兩者連接起來的字符串, 「用戶名」和來自輸入#用戶名的值。

data : { 
'username':username 
}, 

'username',是輸入名字,而username是從輸入

,而這其中,success: $("#resulthere").html(event)也違反語法,

進一步閱讀的價值,你可以參考這個文檔http://api.jquery.com/jquery.ajax/

+0

你能解釋爲什麼它是更好地使用這種方法,而不是當前的請? –

+0

name屬性用於引用JavaScript中的元素,或者在提交表單後引用表單數據。 – Fil

+0

我知道,但是我做得怎麼樣?這種方法更加兼容嗎? –

0

只需更改

data: "username=" + username, 


data: { "username" : username },