我如何使用 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' 元素不是 'input'( .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);
           }

      });
   });
  });