未使用AJAX传递给PHP文件的HTML输入变量

Question

我正在处理的操作需要用户输入他们的姓名，然后他们将单击一个提交按钮，他们的详细信息将根据PHP收集的内容显示在下方。事情是所有这些都需要在同一页面上完成，我已经使用Ajax来做到这一点，但是文本框的输入没有被传递到PHP页面。可能有人建议在我要去哪里错了，因为我真的跑出来的答案就这一个

HTML端：

<form action="summonerSearch.php" method="post"> 
     <input type="text" name="summNameEntered"> 
</form> 




<button type="button">Click Me</button> 
<p></p> 
<script type="text/javascript"> 
    var sname = $("#summNameEntered").val(); 
    $(document).ready(function(){ 
     $("button").click(function(){ 
      $.ajax({ 
       type: 'POST', 
       url: 'summonerSearch.php', 
       data: { // this is new 
       summNameEntered: $("input[name='summNameEntered']").value 
       }, 
       success: function(data) { 
        $("p").html(data); 
       } 

      }); 
    }); 
}); 
</script> 

PHP端：

echo('their name is'.$_POST["summNameEntered"]); 

Answer 1

你需要给输入字段ID summNameEntered，因为这是你在AJAX呼叫中所要求的：

<form action="summonerSearch.php" method="post"> 
     <input type="text" id="summNameEntered" name="summNameEntered"> 
</form> 

或者你也可以简单地改变var sname = $("#summNameEntered").val();到var sname = $(".summNameEntered").val();

而且summNameEntered: $("input[name='summNameEntered']").value应该是summNameEntered: $("input[name='summNameEntered']").val()