个人中心
gpt4 book ai didi

php - jQuery $.post 不显示第二次更改的数据

转载 作者：行者123 更新时间：2023-11-28 02:55:45 24 4
gpt4 key购买 nike

我创建这段代码只是为了简单地展示每一章中特定问题的解决方案。当我第一次更改章节时，会显示解决方案(来自 post.php 文件的数据)。但是，当我再次更改章节时，它不会显示新的解决方案，即使我可以在“console.log”中看到新的解决方案

这是我的代码:

        <!doctype html>

        <html>

        <head>
        <style>
        .chapter_list
       {
         position: absolute;
         left: 100px;
         top: 80%;
      }
          .question_list
      {
    position: absolute;
    left: 300px;;
    top: 80%;
     } 


     </style>
     <link rel="stylesheet" type="text/css" href="index.css"/>
     <script          src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="jquery-1.12.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
            $(".chapter_list").change(function()
            {
                var chapter=$(this).val();


                $.ajax
                ({
                type: "POST",
                url: "get_question_list.php",
                data: 'chapter='+chapter,
                cache: false,
                success: function(html)
                {
                    $(".question_list").html(html);

                } 
                });
            });

        });

        function show_question()
        {
            var chapter = document.getElementById("select_chapter");
           var selected_chapter = chapter.options[chapter.selectedIndex].value;
           //console.log(selected_chapter);
           var question = document.getElementById("select_question");
            if(question.options[question.selectedIndex].value)
            {
            var selected_question = question.options[question.selectedIndex].value;
            //console.log(selected_question);
            $.post('post.php',{selected_chapter:selected_chapter,                              selected_question:selected_question}).success(
       function(data)
       {
            console.log(data);
           $('#display_solution').html(data);
           //alert(data);

       });
        }


        }

    </script>

</head>

<body >

    <label>Chapter</label>
    <select name="chapter_list" class="chapter_list" id="select_chapter" onChange="show_question();">
        <option value="asd" selected="selected">-- Select Chapter --</option>
        <?php
            $connect=mysql_connect("localhost","root","");
            mysql_select_db("books_for_solutions");

            $sql=mysql_query("SELECT DISTINCT chapter FROM math151");

            while ($row=mysql_fetch_array($sql))
            {
        ?>
            <option value="<?php echo $row['chapter']; ?>"><?php echo $row['chapter']; ?></option>
            <?php
            } 
            ?>
    </select>
<label>Question</label>
    <select name="question_list" class="question_list" id="select_question" >
        <option value="a" selected="selected">-- Select Question --</option>  
    </select>
<div id="display_solution"></div>
</body >

</html>

这是我的 post.php 文件

<?php
    include index.php;

    $chapter = $_POST['selected_chapter'];
    $question = $_POST['selected_question'];


    $connect=mysql_connect("localhost","root","");
    mysql_select_db("solutions");
    $sql=mysql_query("SELECT * FROM solutions WHERE chapter='$chapter' AND question='$question'");
    $row=mysql_fetch_assoc($sql);
    $dbloc_question=$row['location_question'];
    $dbloc_solution=$row['location_solution'];

    if ($chapter=="chapter1")
    {
        $display= "solution from chapter1";    
    }
    else
    {
        $display= "solution from chapter2";
    }       
    echo "<p>$display</p>";

?>

最佳答案

1) 如评论中所述，您混合了 onchange 标记和 jQuery .on() 处理程序(通过 .change() ).这可能会导致功能失常。

2) 你包含了 3 个(不同的)版本的 jQuery，这也不好。

3) 您使用 $.post().success()，已弃用，参见 docs弃用说明

4) 请注意，同一事物的不同变量名称以及没有“use strict”会导致使用错误的变量名称(html vs data)- 但不会问题在这里。

5) 另一个注意事项，至少是我的观点:您混合了 jQuery 调用和 native javascript 调用。毫无疑问， native 调用更快，但混合不会产生干净的代码。

<!doctype html>
<html>
    <head>
        <style>
.chapter_list {
    position: absolute;
    left: 100px;
    top: 80%;
}
.question_list {
    position: absolute;
    left: 300px;;
    top: 80%;
} 
        </style>
        <link rel="stylesheet" type="text/css" href="index.css"/>
        <!-- Choose, only use one jQuery at at time -->
        <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> -->
        <!-- <script type="text/javascript" src="jquery-1.4.1.min.js"></script> -->
        <script type="text/javascript" src="jquery-1.12.2.js"></script>
        <script type="text/javascript">
$(document).ready(function() {
    $(".chapter_list").change(function () {
        var chapter=$(this).val();

        console.log('Fire ajax get_question_list.php');
        $.ajax ({
            type: "POST",
            url: "get_question_list.php",
            data: 'chapter='+chapter,
            cache: false,
            success: function(html) {
                console.log('Result from get_question_list: ', html);
                $(".question_list").html(html);
            } 
        });
    });

    // Add event handler to .chapter_list and .question_list
    // If this is fired twice (after the first ajax to get_question_list) remove .chapter_list here
    $(".chapter_list,.question_list").change(function () {
        show_question();
    });
});

function show_question() {
    var chapter = document.getElementById("select_chapter");
    var selected_chapter = chapter.options[chapter.selectedIndex].value;
    console.log("Selected chapter: ", selected_chapter);
    var question = document.getElementById("select_question"),
        selected_question = $(question).val();
    console.log("Selected question: ", selected_question);
    if(selected_question) {
        console.log("Try to load solution for question ", question_value)
        // Here was the closing bracket wrong
        //old: $.post('post.php',{selected_chapter:selected_chapter, selected_question:selected_question}).success(
        $.post('post.php', {selected_chapter:selected_chapter, selected_question:selected_question}, function(data) {
            console.log('Result from post.php: ', data);
            $('#display_solution').html(data);
            //alert(data);
        });
    }
}
        </script>
    </head>
    <body>
        <label>Chapter</label>
        <select name="chapter_list" class="chapter_list" id="select_chapter"><!-- Removed onChange -->
            <option value="asd" selected="selected">-- Select Chapter --</option>
<?php
$connect=mysql_connect("localhost","root","");
mysql_select_db("books_for_solutions");
$sql=mysql_query("SELECT DISTINCT chapter FROM math151");
while ($row=mysql_fetch_array($sql)) {
?>
            <option value="<?php echo $row['chapter']; ?>"><?php echo $row['chapter']; ?></option>
<?php
} 
?>
        </select>
        <label>Question</label>
        <select name="question_list" class="question_list" id="select_question">
            <option value="a" selected="selected">-- Select Question --</option>  
        </select>
        <div id="display_solution"></div>
    </body >
</html>

关于php - jQuery $.post 不显示第二次更改的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37196330/

24 4 0
文章推荐： javascript - 使用什么样的库来显示图形对象和右键单击上下文菜单
文章推荐： C++:简单的 fstream 不写入输出文件(不确定它是否正在使用输入文件)
文章推荐： javascript - 如何在每次打开新选项卡或页面时预加载本地 JavaScript？
文章推荐： c++ - 我怎样才能在后台运行一个软件而不显示任何窗口使用 C++
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com