提交彈出窗體後用AJAX更改頁面內容

我有這個問題，爲了改變頁面內容我必須接收用戶輸入。我想通過彈出窗體來做到這一點。點擊彈出按鈕「提交」後，我想將表單輸入發送到一個php文件，在該文件中，我連接到數據庫並通過JSON將檢索到的信息發送到js文件，我使用$.post()方法來實現所有這些。問題是頁面內容的內容被改變而沒有重新加載，我被重定向到頁面http://localhost/statistics.php?major=KN&year=2011，但我想留在頁面http://localhost/statistics.php。這就是爲什麼我首先使用AJAX。 major=KN & year=2011是我的POST參數。提交彈出窗體後是否可以更改頁面的內容？任何幫助將不勝感激。提交彈出窗體後用AJAX更改頁面內容

這裏是我認爲可能是相關的解決問題的代碼：

<html> 
     <head> 
      <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
      <script src="ch/Chart.js"></script> 
      <script src="js/statistics_js.js"></script> 
     </head> 
     <body> 
     <div id="content"> 
      <div id="abc"> 
       <div id="popupContact"> 
        <form id="form1" name="form1"> 
         <img class="close" src="images/3.png" onclick ="div_hide_group_popup()"> 
         <h2>Fill the form</h2> 
         <hr> 
         <input name="major" placeholder="Major" type="text"> 
         <input name="year" placeholder="Year" type="number"> 
         <button id="submit1">Submit</button> 
        </form> 
       </div> 
      </div> 
      <div id="page"> 
       <canvas id="myChart"></canvas> 
      </div> 
      <aside> 
       <h3>Compare</h3> 
       <ul> 
        <li id="group"><a href="#">groups</a></li> 
       </ul> 
      </aside> 
     </div> 
     </body> 
    </html>

的js/statistics_js.js文件：

function error(){ 
     alert('Error!'); 
    } 

    $(document).ready(function(){ 
     $('#group').on('click', function(e) { 
      e.preventDefault(); 
      document.getElementById('abc').style.display = "block"; 
     }); 
    }); 

    $(document).ready(function(){ 
     $("#submit1").click(function() { 
      $.post("http://localhost/group_sort.php", $("#form1").serialize(), "JSON").done(function(data) { 
        //This should use the Chart.js library to draw a chart on the canvas with the data retrieved from the server. 
        var barChartData = { 
         labels : data.groups, 
         datasets : [ 
          { 
           fillColor : "rgba(151,187,205,0.5)", 
           strokeColor : "rgba(151,187,205,0.8)", 
           highlightFill : "rgba(151,187,205,0.75)", 
           highlightStroke : "rgba(151,187,205,1)", 
           data : data.groups_total_points 
          } 
         ] 
        } 
        var ctx = document.getElementById("myChart").getContext("2d"); 
        window.myBar = new Chart(ctx).Bar(barChartData, { 
         responsive : true 
        }); 
       }).error(error); 
     }); 
    }); 

    function div_hide_group_popup(){ 
     document.getElementById('abc').style.display = "none"; 
    }

我group_sort.php：

<?php 
     require "config.php"; 
     try { 
      $conn = new PDO("mysql:host=" . DB_SERVER . ";dbname=" . DB_NAME, DB_USERNAME, DB_PASSWORD); 
     } 
     catch(PDOException $e) { 
      die("Database connection could not be established."); 
     } 
     $conn->exec("SET NAMES UTF8"); 
     $major = $_POST['major']; 
     $year = $_POST['year']; 
     $sql = "SELECT result.group, SUM(result.grade) AS group_total_points 
       FROM (
        SELECT * 
        FROM students AS s 
        INNER JOIN points AS p 
        ON s.fn = p.student_fn 
       ) result 
       WHERE result.major = '$major' AND result.year = '$year' 
       GROUP BY result.group 
       ORDER BY group_total_points DESC"; 
     $query = $conn->query($sql); 
     if($query->rowCount() > 0) { 
      $data = array (
       "groups" => [], 
       "groups_total_points" => [], 
       ); 
      while ($row = $query->fetch(PDO::FETCH_ASSOC)) { 
       $data["groups"][] = $row["group"]; 
       $data["groups_total_points"][] = $row["group_total_points"]; 
      } 
      echo json_encode($data); 
     } 
     else { 
      echo mysql_error(); 
     } 

     $conn = null; 
    ?>

來源

2015-02-05 mariya

你的提交按鈕可能在您單擊它時提交表單。防止默認動作點擊：

$("#submit1").click(function(event) { 
     event.preventDefault(); 
     $.post("http://localhost/group_sort.php", $("#form1").serialize(), "JSON").done(function(data) {

來源

2015-02-05 17:49:28 bobdye

這是它應該這樣做 - 將輸入從表單發送到'php'文件。現在，我做了你所說的，雖然我從error（）函數中得到了一個警告「錯誤」。任何想法如何看看它來自哪裏？ – mariya 2015-02-05 17:56:13

不，你想通過Ajax獲得輸入，而不是提交表單。可能發生的情況是您的表單正在提交，頁面正在刷新，並且您的Ajax調用從未被執行。當您阻止默認設置時，您的Ajax代碼被使用並出現錯誤。什麼是錯誤信息？ – bobdye 2015-02-05 18:00:43

這只是「錯誤！」因爲這就是我的'error（）'方法的主體。任何想法如何改變它，讓我得到實際的錯誤？ – mariya 2015-02-05 18:04:06

您的問題是，您的提交按鈕正在完成提交。我會建議將其更改爲正常按鈕以防止提交，儘管他們可以按Enter鍵並提交表單。爲此，您必須阻止表單的提交功能。

的簡單的解決方法是用一個簡單的div來替換形式：

<div class="form"> 
    <img class="close" src="images/3.png" onclick ="div_hide_group_popup()"> 
    <h2>Fill the form</h2> 
    <hr> 
    <input class="submit-form" name="major" placeholder="Major" type="text"> 
    <input class="submit-form" name="year" placeholder="Year" type="number"> 
    <button id="submit1">Submit</button> 
</div>

然後使用jQuery，您可以選擇在回調的document.ready表單元素：

$(document).ready(function(){ 
    var input = $('input.submit-form'); 
    $("#submit1").click(function() { 
     $.post( 
      "http://localhost/group_sort.php", 
      input.serialize(), 
      "JSON").done(function(data) { //...

來源

2015-02-05 18:39:32 MiltoxBeyond

提交彈出窗體後用AJAX更改頁面內容

回答

相關問題