Javascript 获取列表项的值并发布到ajax

如果我有一个php生成的下拉菜单，如何使用jQueryAjax将这些数据发布到服务器？因此，我可以在同一页上反馈数据是否已提交，下面的代码正在使用引导

在我的工作中，我正在尝试创建一个允许用户施放自我咒语的游戏，用户将提交要施放的自我咒语，并将其提交到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>

---

只需从下拉列表中读取值。给你的UL一个身份证：

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

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

尝试以下操作：

$(".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());
  $(".dropdown-menu").attr('value', $(this).data('value'));
});

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

});

试试这个：

$(document).on('click', '.dropdown-menu li a', function () {
    var selected_value = $(this).text();
    $(#hidden_element).val(selected_value);   
});

一旦从on更改中获得值并将其存储在隐藏元素中。然后使用以下代码：

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

    });

HTML示例：

<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">
        <li>Item - #1</li>
        <li>Item - #2</li>
        <li>Item - #3</li>
     </ul>
   </div>
   <input type="hidden" id="hidden_element" value=""> 
   <button type="submit" id="submitselfspell" class="btn btn-default">Cast</button>
</form>

自我咒语

项目-#1
项目-#2
项目-#3

铸造

它会给您带来一些错误吗？你不知道该怎么办？你需要哪一部分？我知道，这个评论与你的问题没有直接关系，但是：你真的应该把HTML和PHP分开。考虑使用模板，或者至少请预先检索您的数据，然后只有在准备就绪时，才启动HTML块。没有错误，我不知道如何通过Ajax向服务器发布所选列表项的值。side@sutoL从一些Ajax教程开始

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

    });

<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">
        <li>Item - #1</li>
        <li>Item - #2</li>
        <li>Item - #3</li>
     </ul>
   </div>
   <input type="hidden" id="hidden_element" value=""> 
   <button type="submit" id="submitselfspell" class="btn btn-default">Cast</button>
</form>