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的代码中，你有，

data: "username=" + username

违反了jquery语法，你所做的是连接两个字符串，“username”和输入#username的值。

data : {
 'username':username
},

'username'是输入名称，而username是该输入的值

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

如需进一步阅读，请参阅此文档http://api.jquery.com/jquery.ajax/

Answer 2

只需改变

data: "username=" + username,

到

data: { "username" : username },

未显示AJAX提交的结果

2 个答案: