javascript - 我如何使用 jquery 通过 ajax 单击链接发布到 php 脚本？

Question

我有一个成员数据库，我需要能够单击按字母顺序排列的字符链接或按钮，将该字符传递给 ajax 事件并运行一个带有该字符作为选项的脚本，例如 getResults?char=A在定期提交的表格上。

<form>

<p>
<a href="#" name="char" class="switchChar" value="A" id="A">A</a>
<a href="#" name="char" class="switchChar" value="B" id="B">B</a>
</p>

<div id="Results">Results Div</div>

</form>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>


<script>
  $(document).ready(function() {
    // $(document).on('click','.switchChar',function()
    $('a.switchChar').click(function() {

      var DATA=$(this).val();
      var data=(DATA);
      var CHAR=$(this).attr('char');
      $("#Results").html( "" );
      var dataString = 'char='+ data;

      $.ajax({
        url: "getResults.php", /* Will add this later */
        type: "POST",
        data: dataString,
        cache: false,
        success: function(data)
        {
          $("#Results").html(data);
        }
      }
    });
  });
</script>

Answer 1

不要使用 var DATA=$(this).val();或 var CHAR=$(this).attr('char');和 var data=(DATA);

使用.attr('value');它的“a”元素不是“输入”(.val())

或使用 $(this).html();获取里面的字母<a></a>

$(document).ready(function() {

    $('a.switchChar').click(function() {
      var data=$(this).attr('value'); //this 'a' element (not 'input'), 'value' -> attribute
      $("#Results").html("");
      var dataString ='char='+ data ; 
     console.log(dataString)
      $.ajax({
           url: "getResults.php", /* Will add this later */
           type: "post",
           data: dataString,
           cache: false,
           success: function(data){
              $("#Results").html(data);
           }

      });
   });
  });