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

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

转载作者：行者123 更新时间：2023-11-28 02:55:45

我创建这段代码只是为了简单地展示每一章中特定问题的解决方案。当我第一次更改章节时，会显示解决方案(来自 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/

android -/数据/数据/在哪里？
初学者 android 问题。好的，我已经成功写入文件。例如。 //获取文件名 String filename = getResources().getString(R.string.filename
安卓/数据/数据/mypackage/img
我已经将相同的图像保存到/data/data/mypackage/img/中，现在我想显示这个全屏，我曾尝试使用 ACTION_VIEW 来显示 android 标准程序，但它不是从/data/dat
ios - Swift 4:无法将“数据”类型的值转换为预期的参数类型“数据”
我正在使用Xcode 9，Swift 4。我正在尝试使用以下代码从URL在ImageView中显示图像: func getImageFromUrl(sourceUrl: String) -> UII
android - 基因运动。如何从设备中提取数据库。我的/数据/数据/文件夹似乎是空的
我的 Ubuntu 安装 genymotion 有问题。主要是我无法调试我的数据库，因为通过 eclipse 中的 DBMS 和 shell 中的 adb 我无法查看/data/文件夹的内容。没有显示
php - JSON 数据 ajax 不是正确的 POST 数据
我正在尝试用 PHP 发布一些 JSON 数据。但是出了点问题。这是我的 html -- {% for x in sets %}
r - lm(数据~时间)和tslm(数据~趋势)有什么区别
我观察到两种方法的结果不同。为什么是这样？我知道 lm 上发生了什么，但无法弄清楚 tslm 上发生了什么。 > library(forecast) > set.seed(2) > tts lm(t
Spring 数据 JPA 和 Spring 数据 Elasticsearch ；找不到类型的属性索引？
我不确定为什么会这样!我有一个由 spring data elasticsearch 和 spring data jpa 使用的类，但是当我尝试运行我的应用程序时出现错误。 Error creatin
d3.js - 数据过滤器适用于 json 数据，但不适用于 csv 数据
在 this vega 图表，如果我下载并转换 flare-dependencies.json使用以下 jq 到 csv命令， jq -r '(map(keys) | add | unique) as
php - 在 .php 文件中发送 mysql 数据/mysql 数据
我正在提交一个项目，我必须在其中创建一个带有表的 mysql 数据库。一切都在我这边进行，所以我只想检查如何将我所有的压缩文件发送给使用不同计算机的人。基本上，我如何为另一台计算机创建我的数据库文件，
android - 如何使用 Android Device Monitor 的文件资源管理器查找我的应用程序/数据/数据
我有一个应用程序可以将文本文件写入内部存储。我想仔细看看我的电脑。我运行了 Toast.makeText 来显示路径，它说:/数据/数据/我的包但是当我转到 Android Studio 的 An
android - 如何从 Genymotion 的 android 模拟器访问文件/数据/数据？
我喜欢使用 Genymotion 模拟器以如此出色的速度加载 Android。它有非常好的速度，但仍然有一些不稳定的性能。如何从 Eclipse 中的文件资源管理器访问 Genymotion 模拟器
silverlight - 如果我在 setter 中使用不同的值更改绑定(bind)数据，如何刷新绑定(bind)数据
我需要更改 Silverlight 中文本框的格式。数据通过 MVVM 绑定(bind)。例如，有一个 int 属性，我将 1 添加到 setter 中的值并调用 OnPropertyChanged
youtube - 通过 YouTube 数据 API 访问公共(public)数据，无需身份验证。
我想向 Youtube Data API 提出请求，但我不需要访问任何用户信息。我只想浏览公共(public)视频并根据搜索词显示视频。我可以在未经授权的情况下这样做吗？最佳答案 YouTube
python - 无法让 twilio 显示 'from' 数据，但它会显示 'to' 数据
我已经设置了一个 Twilio 应用程序，我想向人们发送更新，但我不想回复单个文本。我只是想让他们在有问题时打电话。我一切正常，但我想在发送文本时显示传入文本，以确保我不会错过任何问题。我正在使用 p
javascript - 向客户端发送 JSON 数据？ D3.js 渲染 JSON 数据
我有一个带有表单的网站(目前它是纯 HTML，但我们正在切换到 JQuery)。流程是这样的: 接受用户的输入 --- 5 个整数通过 REST 调用网络服务在服务器端运行一些计算...并生成一个
javascript - 如何检测一个 JavaScript 文件只包含 JSON 数据，还是打算包含 JSON 数据？
假设我们有一个名为 configuration.js 的文件，当我们查看内部时，我们会看到: 'use strict'; var profile = { "project": "%Projec
javascript - 在初始 .ajax 调用之外使用 JSON 数据 - 访问剩余的 JSON 数据
这部分是对 Previous Question 的扩展我的: 我现在可以从我的 CI Controller 成功返回 JSON 数据，它返回: {"results":[{"id":"1","Sourc
ios - 删除所有 Couchbase 数据/文档 ios(或删除所有 ios 数据？)
有什么有效的方法可以删除 ios 中 CBL 的所有文档存储？我对此有疑问，或者，如果有人知道如何从本质上使该应用程序像刚刚安装一样，那也会非常有帮助。我们正在努力确保我们的注销实际上将应用程序设置为
javascript - $.post(url, 函数(数据,状态) {警报(数据)});警报()不工作
我有一个 Rails 应用程序，它与其他 Rails 应用程序通信以进行数据插入。我使用 jQuery $.post 方法进行数据插入。对于插入，我的其他 Rails 应用程序显示 200 OK。但在
javascript - 断言错误 : expected { status: 'SUCCESS' , 数据 : [] } to equal { Object (status, 数据)}
我正在为服务于发布请求的 API 调用运行单元测试。我正在传递请求正文，并且必须将响应作为帐户数据返回。但我只收到断言错误注意:数据是从 Azure 中获取的 spec.js const accou

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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