jQuery $ .post不會在第二次更改中顯示數據

我已經創建了此代碼，以簡單顯示每章中特定問題的解決方案。當我第一次更改章節時，將顯示解決方案（來自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>"; 

?>

來源

2016-05-12 enes yazici

您是否試圖將您的示例最小化爲最簡單的示例，這仍然證明您遇到的問題？ – wogsland

你不應該混合使用jQuery的'.on（）'（如'.change（）'）和'on ... =「」'html-tags。這可能會導致失誤。 – clemens321

任何想法，我怎麼能使這件事情工作@ clemens321。 –

1）正如評論所說，你混的onchange標籤和jQuery .on()處理程序（通過.change()）。這可能會導致錯誤的功能。

2）你包括3（不同）版本的jQuery，這也不好。

3）使用.post的$（）。成功（），它被廢棄了，看到docs折舊記

4）剛一說明，同樣的事情，並沒有「使用嚴格的」鉛不同的變量名使用錯誤的（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>

來源

2016-05-12 20:56:56 clemens321

感謝您的回答，但結果與顯示解決方案div標籤內的文本沒有任何變化。 –

jQuery $ .post不會在第二次更改中顯示數據

回答

相關問題