php - 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(结果.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代码中，你有，

data: "username=" + username

这违反了 jquery 语法，您所做的是连接两个字符串，“username”和来自 input#username 的值。

data : {
 'username':username
},

'username'，是一个输入名称，而 username 是来自该输入的值

虽然这一个，success: $("#resulthere").html(event) 也违反了语法，

如需进一步阅读，您可以引用此文档http://api.jquery.com/jquery.ajax/