javascript - 获取列表项的值并POST到ajax

Question

如果我有一个 php 生成的下拉菜单，如何使用 jQuery ajax 将此数据发布到服务器？这样我就可以在同一个页面反馈数据是否提交了，下面的代码就是使用bootstrap。

对于我的工作，我正在尝试创建一个允许用户施放 self 咒语的游戏，用户将提交要施放的 self 咒语并将其提交到 selfspellajax.php，它将反馈到 #selfspellhint 是否法术是否施展。

 <form role="form">
   <div class="input-group-btn">
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
       Self Spells
       <span class="caret"></span>
     </button>
     <ul class="dropdown-menu pull-left">
     <?php
require_once('../../protected/configreadutopia.php');

$connection = mysqli_connect(DBHOST,DBUSER,DBPASS,DBNAME);

if (!$connection) {
  die('Could not connect: ' . mysqli_error($con));
}

if(isset($_SESSION["userid"])){
    if(!empty(($_SESSION["userid"]))){
        //prepare stmnt
        $query= mysqli_prepare($connection,'SELECT * FROM spellbook');
        //execute
        mysqli_stmt_execute($query);
        //result set.
        $result = mysqli_stmt_get_result($query);

            while($row = mysqli_fetch_assoc($result))
            {
                echo '<li><a href="#" data-value="'.$row["spell"].'">'.$row["spell"].'</a></li>';
            }
        // Free result set
        mysqli_free_result($result);
    }
}else{
    echo 'No user logged in';
}
mysqli_close($connection);
     ?>
     </ul>
   </div>
             <button type="submit" id="submitselfspell" class="btn btn-default">Cast</button>
            </form>

我的JS文件

  $(".dropdown-menu li a").click(function(){
  $(this).parents(".input-group-btn").find('.btn').text($(this).text());
  $(this).parents(".input-group-btn").find('.btn').val($(this).text());
});

$("#submitselfspell").click(function () {
            var spellval = "test";
            jQuery.ajax({
            type: "POST",
            url: 'selfspellajax.php',
            data:{spellval:spellval},
            success: function(data) {
            $("#selfspellhint").html(data);
            }
        });

    });

Answer 1

只需从下拉菜单中读取值即可。为您的 UL 提供一个 ID:

<ul class="dropdown-menu pull-left" id="my-dropdown">

然后你可以通过jQuery读取该值

var data = $('#my-dropdown').val();

并将其放入ajax调用的数据对象中。