Xmlrequest не работает для получения данных и заполнения таблицы данных

Итак, я пытаюсь получить данные из хранимой процедуры и поместить их в таблицу на своем веб-сайте. Когда я вызываю функции API из своего JS-файла (используя XML REQUEST), оператор if никогда не запускается, и я никогда не получаю результат. Я не слишком уверен, где моя ошибка, потому что я не получаю сообщения об ошибке, я просто не получаю данные, возвращаемые в мою таблицу.

Функция, которая вызывает API из JS файла

 function getStudentTopicQuizResult()
    {
        console.log("step 1");
        
    
        var req = new XMLHttpRequest();
        req.open('POST', 'https://localhost:44303/api/JSON/getStudentTopicQuizResult', true);
        req.setRequestHeader('Content-Type', 'application/json');
        
        req.onreadystatechange = function() { // Call a function when the state changes.
            if (this.readyState === XMLHttpRequest.DONE && this.status === 200) 
            {
                var result = req.response;
                console.log("step 2");
            }
        }
        
        
        return false;
    }

Функции API ASP.NET

[System.Web.Http.HttpPost]
        public object getStudentTopicQuizResult()
        {
            var response = Request.CreateResponse(HttpStatusCode.OK);

            string sql = "getStudentTopicQuizResult";
            var json = ExecuteSPGetStudentTopicQuizResult(sql);

            response.Content = new StringContent(json);
            return response;
        }

 private static string ExecuteSPGetStudentTopicQuizResult(string queryString)
        {
            string json = "";
            string connectionString = ConfigurationManager.AppSettings["dbconn"].ToString();

            using (SqlConnection conn = new SqlConnection(connectionString))
            {
                conn.Open();

                // 1.  create a command object identifying the stored procedure
                SqlCommand cmd = new SqlCommand(queryString, conn);

                // 2. set the command object so it knows to execute a stored procedure
                cmd.CommandType = CommandType.StoredProcedure;

                // execute the command
                using (SqlDataReader rdr = cmd.ExecuteReader())
                {
                    // iterate through results, printing each to console
                    while (rdr.Read())
                    {
                        json += "{\"name\":\"" + (string)rdr[0].ToString() + " " + (string)rdr[1].ToString() + "\",\"";
                        json += "\"topic\":\"" + (string)rdr[2].ToString() + "\",\"";
                        json += "\"score\":\"" + (string)rdr[5].ToString() + "\",\"";
                        json += "\"ids\":\"" + (string)rdr[3].ToString() + "|" + (string)rdr[4].ToString() + "\"\"},";
                        Console.WriteLine(json);
                    }
                }

                return json;
            }
        }

Код хранимой процедуры SQL

USE [Capstone]
GO
/****** Object:  StoredProcedure [dbo].[getStudentTopicQuizResult]    Script Date: 3/29/2021 6:01:59 PM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO

ALTER PROCEDURE  [dbo].[getStudentTopicQuizResult]
AS
BEGIN

select  FirstName, LastName, QuizName, [StudentQuizScore].StudentID, [StudentQuizScore].QuizID, QuizScore 
from [dbo].[StudentQuizScore]
inner join Student
on Student.StudentID = [StudentQuizScore].StudentID
inner join Quiz
on quiz.QuizID = [StudentQuizScore].QuizID


END

HTML-код для страницы сайта с таблицей (код скрипта внизу)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title id=tabtitle>
    Teacher Home 
  </title> <!-- dependent on student login -->
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
  <!--     Fonts and icons     -->
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <!-- CSS Files -->
  <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
  <link href="../assets/css/now-ui-kit.css?v=1.3.0" rel="stylesheet" />
  <!-- CSS Just for demo purpose, don't include it in your project -->
  <link href="../assets/demo/demo.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
</head>

<body class="profile-page sidebar-collapse">
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg bg-primary fixed-top navbar-transparent " color-on-scroll="400">
    <div class="container">
      <div class="collapse navbar-collapse justify-content-end" id="navigation" data-nav-image="../assets/img/blurred-image-1.jpg">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="welcome-page.html">Welcome/Overview</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- End Navbar -->
  
    <div class="page-header clear-filter page-header-small" >
      <div class="page-header-image" data-parallax="true" style="background-image:url('../assets/img/capstone/space-bg.jpg');">
      </div>
      <div class="container">
        <h1 id="pagetitle" class="title">Class's Future <!-- dependent on student login --></h1>
      </div>
    </div>
    
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
     </div>
    
    <div class="col-xl-10 ml-auto mr-auto text-center">
        <table class="display" id="example">
            <thead>
                <tr>
                    <th>Student Name</th>
                    <th>Topic</th>
                    <th>Score</th>
                    <th>Quiz Response</th>
                </tr>
            </thead>
        </table>
    </div>
    
    <footer class="footer">
      <div class=" container ">
        <nav>
          <ul>
            <li>
              <a href="https://mhs.monroeps.org/" target="_blank">
                Masuk High School
              </a>
            </li>
            <li>
              <a href="https://classroom.google.com/h" target="_blank">
                Google Classroom
              </a>
            </li>
          </ul>
        </nav>
        <div class="copyright" id="copyright">
          &copy;
          <script>
            document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))
          </script> Designed and coded by Mike Aiello</a>
        </div>
      </div>
    </footer>
  
  <!--   Core JS Files   -->
  <script src="../assets/js/core/jquery.min.js" type="text/javascript"></script>
  <script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
  <script src="../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
  <!--  Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
  <script src="../assets/js/plugins/bootstrap-switch.js"></script>
  <!--  Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
  <script src="../assets/js/plugins/nouislider.min.js" type="text/javascript"></script>
  <!--  Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
  <script src="../assets/js/plugins/bootstrap-datepicker.js" type="text/javascript"></script>
  <!--  Google Maps Plugin    -->
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
  <!-- Control Center for Now Ui Kit: parallax effects, scripts for the example pages etc -->
  <script src="../assets/js/now-ui-kit.js?v=1.3.0" type="text/javascript"></script>
  <script src="../assets/js/core/helperFunctions.js" type="text/javascript"></script>
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
</body>

<script>

        $(document).ready(function(){   
                //var userName = getCookie('myFutureUserName');
                var userName = localStorage.getItem('myFutureUserName');
                var userID = localStorage.getItem('myFutureUserID');
                
                const urlParams = new URLSearchParams(window.location.search);
                const myParam = urlParams.get('dataKey');
                
                var responseObj = getStudentTopicQuizResult();
                /*var responseObj = [
                { "name":"A1", "topic": "A1", "score": "100", "ids": "1009|10" },
                { "name":"A2", "topic": "A1", "score": "100", "ids": "1009|1" }
                ];
                */

            $('#example').dataTable({
               "data": responseObj,
               "columns": [
                  { "data": "name" }, 
                  { "data": "topic" }, 
                  { "data": "score" }, 
                  
                  { 
                     "data": "ids",
                     "render": function(data, type, row, meta){
                        //if(type === 'display'){
                              data = '<button type="button" class="btn btn-info btn-sm" onclick="openModal(\'' + data + '\')" >Show Quiz Response</button>';
                       //}
                        
                        return data;
                     }
                  } 
               ]
            });

            
            
        });
        
        function openModal(quizID) {
                alert(quizID);
                localStorage.setItem('quizResponseID', quizID);
                $("#myModal").modal();
            }
                
</script>

</html>

Вы проверяли вызов своего API с помощью чего-то вроде Postman? Когда вы используете событие «readystatechange» в своем объекте XMLHttpRequest, ваш оператор «if» срабатывает только тогда, когда запрос будет завершен (т.е. DONE) И возвращенным статусом будет 200. Возможно, вы получите другое возвращаемое значение статуса (например, 404, 500 и т. д.). Таким образом, Postman - это удобный способ подтвердить, что вызов API действительно завершается успешно. В противном случае временно измените оператор «if», чтобы определить получаемое вами значение статуса - if (this.readyState === XMLHttpRequest.DONE) {alert (this.status.toString ()); }

Craig 30.03.2021 01:39

Прежде чем отправиться по этой дороге? Вы уверены, что вам нужно сделать это на стороне клиента? Разве данные не будут вытягиваться в datatable, а затем назначить эту таблицу представлению gridview / list, не будет ли намного меньше кода? Если вы беспокоитесь о том, что для этого не будет обратной публикации страницы, затем опустите сетку внутри панели обновлений - таким образом, вам не понадобится полная обратная публикация страницы, и вы получите почти такой же результат с панелью обновления. . Честно говоря, если вы используете какой-то "диалог" jQuery.UI, то, возможно, лучше использовать весь ajax, но это не улучшит производительность, а просто уберет сообщение на странице.

Albert D. Kallal 30.03.2021 03:16
0
2
17
0

Другие вопросы по теме