Fatal编程技术网
  • php/
  • Php jQuery$.post不'；t显示第二次更改时的数据

Php jQuery$.post不'；t显示第二次更改时的数据

php jquery html

Php jQuery$.post不'；t显示第二次更改时的数据,php,jquery,html,.post,Php,Jquery,Html,.post,我创建这段代码只是为了简单地展示每个章节中特定问题的解决方案。当我第一次更改章节时，将显示解决方案（post.php文件中的数据）。但是，当我再次更改章节时，它不会显示新的解决方案，即使我可以在“console.log”中看到新的解决方案 这是我的密码： <!doctype html> <html> <head> <style> .chapter_list

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


.第四章清单
{
位置：绝对位置；
左：100px；
最高：80%；
}
.问题清单
{
位置：绝对位置；
左：300px；；
最高：80%；
} 
$（文档）.ready（函数（）
{
$（“.chapter_list”）.change（函数（）
{
var chapter=$（this.val（）；
$.ajax
({
类型：“POST”，
url:“get_question_list.php”，
数据：“章=”+章，
cache:false，
成功：函数（html）
{
$（“.question_list”）.html（html）；
} 
});
});
});
函数show_question（）
{
var chapter=document.getElementById（“选择章节”）；
所选var\u chapter=chapter.options[chapter.selectedIndex].value；
//console.log（所选章节）；
var question=document.getElementById（“选择问题”）；
if（question.options[question.selectedIndex].value）
{
var selected\u question=question.options[question.selectedIndex].value；
//console.log（所选问题）；
$.post（'post.php'，{所选章节：所选章节，所选问题：所选问题}）。成功(
功能（数据）
{
控制台日志（数据）；
$（'#显示解决方案'）.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（）已被弃用，请参阅弃用说明

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

5） 另一个注意事项，至少在我看来是这样的：您混合了jQuery调用和本机javascript调用。毫无疑问，本机调用速度更快，但混合不会生成干净的代码


<!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>




.第四章清单{
位置：绝对位置；
左：100px；
最高：80%；
}
.问题清单{
位置：绝对位置；
左：300px；；
最高：80%；
} 
$（文档）.ready（函数（）{
$（“.chapter_list”）.更改（函数（）{
var chapter=$（this.val（）；
log（'fireajax get_question_list.php'）；
$.ajax({
类型：“POST”，
url:“get_question_list.php”，
数据：“章=”+章，
cache:false，
成功：函数（html）{
log（'获取问题列表的结果：'，html）；
$（“.question_list”）.html（html）；
} 
});
});
//将事件处理程序添加到.chapter\u列表和.question\u列表
//如果触发两次（在第一次ajax获取问题列表之后），请删除
$（“.chapter_list，.question_list”）.change（函数（）{
显示问题（）；
});
});
函数show_question（）{
var chapter=document.getElementById（“选择章节”）；
所选var\u chapter=chapter.options[chapter.selectedIndex].value；
日志（“所选章节：”，所选章节）；
var question=document.getElementById（“选择问题”），
所选的_question=$（question.val（）；
日志（“所选问题：”，所选问题）；
如果（所选问题）{
log（“尝试加载问题的解决方案”，问题值）
//这里是结束括号错误
//old:$.post（'post.php'，{selected_chapter:selected_chapter，selected_question:selected_question}）。成功(
$.post（'post.php'，{所选章节：所选章节，所选问题：所选问题}，函数（数据）{
log（'Result from post.php:'，data）；
$（'#显示解决方案'）.html（数据）；
//警报（数据）；
});
}
}
章
--选择章节--
问题:
--选择问题--

您是否尝试过将示例简化为最简单的示例，以证明您存在的问题？您不应该将jQuery的
.on（）
（如
.change（）
）和
on…=”
html标记混合使用。这可能会导致功能错误。您知道如何让这件事在@clemens321.console.log（data）上运行吗$（'#display_solution'）.html（数据）；您在控制台中得到了什么？将其粘贴到这里console.log（数据）我从第1章中获得解决方案，当我从选择菜单中选择第2章时，我从第2章中获得解决方案，但是div标签在页面上仍然具有第1章文本中的解决方案谢谢您的回答，但是结果是相同的，显示解决方案div标签内的文本没有变化。