如何使用Ajax GET和POST并将表中的输出更改为dataType json？

如何解决如何使用Ajax GET和POST并将表中的输出更改为dataType json？

我想使用Highcharts制作与MySQL Workbench连接的图表。我已经连接到数据库并以表格形式显示数据。但是现在我想使用ajax get和post获取表中的数据以与图表（javascript文件）连接。现在，我在如何将数据类型更改为json时遇到问题，我不太了解如何使用Ajax，但我知道可以这样做。我使用了MVC asp.Net core 3.1。这是我的代码：

控制器

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Dashboard.Models;
using Microsoft.AspNetCore.Mvc;

namespace Dashboard.Controllers
{
    public class SystemappsController : Controller
    {
        public IActionResult Index()
        {
            Systemapps context = HttpContext.RequestServices.GetService(typeof(Dashboard.Models.Systemapps)) as Systemapps;
            return View(context.GetAllSystemappsModel());
        }
    }
}

模型

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using MySql.Data.MySqlClient;

namespace Dashboard.Models
{
    public class Systemapps
    {
        public string ConnectionString { get; set; }

        public Systemapps(string connectionString)
        {
            this.ConnectionString = connectionString;
        }

        private MySqlConnection GetConnection()
        {
            return new MySqlConnection(ConnectionString);
        }

        public List<SystemappsModel> GetAllSystemappsModel()
        {
            List<SystemappsModel> list = new List<SystemappsModel>();

            using (MySqlConnection conn = GetConnection())
            {
                conn.Open();
                MySqlCommand cmd = new MySqlCommand("select * from statistics",conn);

                using (var reader = cmd.ExecuteReader())
                {
                    while (reader.Read())
                    {
                        list.Add(new SystemappsModel()
                        {
                            time = reader["time"].ToString(),vehi_1 = Convert.ToInt32(reader["vehi_1"]),vehi_2 = Convert.ToInt32(reader["vehi_2"]),vehi_3 = Convert.ToInt32(reader["vehi_3"]),vehi_4 = Convert.ToInt32(reader["vehi_4"]),vehi_5 = Convert.ToInt32(reader["vehi_5"]),vehi_6 = Convert.ToInt32(reader["vehi_6"]),total_vehicle = Convert.ToInt32(reader["total_vehicle"])
                        });
                    }
                }
            }
            return list;
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.ComponentModel.DataAnnotations;

namespace Dashboard.Models
{
    public class SystemappsModel
    {
        //private Statistics context;

        public string time { get; set; }
        public int vehi_1 { get; set; }
        public int vehi_2 { get; set; }
        public int vehi_3 { get; set; }
        public int vehi_4 { get; set; }
        public int vehi_5 { get; set; }
        public int vehi_6 { get; set; }
        public int total_vehicle { get; set; }
    }


}

HTML

@model IEnumerable<Dashboard.Models.SystemappsModel>

@{ 
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Data</h2>

<table class="table" id="staticsTable">
    <tr>
        <th>Time</th>
        <th>C1</th>
        <th>C2</th>
        <th>C3</th>
        <th>C4</th>
        <th>C5</th>
        <th>C6</th>
        <th>Total Vehicle</th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>@Html.DisplayTextFor(modelItem => item.time)</td>
            <td>@Html.DisplayTextFor(modelItem => item.vehi_1)</td>
            <td>@Html.DisplayTextFor(modelItem => item.vehi_2)</td>
            <td>@Html.DisplayTextFor(modelItem => item.vehi_3)</td>
            <td>@Html.DisplayTextFor(modelItem => item.vehi_4)</td>
            <td>@Html.DisplayTextFor(modelItem => item.vehi_5)</td>
            <td>@Html.DisplayTextFor(modelItem => item.vehi_6)</td>
            <td>@Html.DisplayTextFor(modelItem => item.total_vehicle)</td>
        </tr>
    } 

</table>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width-device-width,initial-scale=1.8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>


    <style>
        * {
            box-sizing: border-box;
        }

        /* Create two equal columns that floats next to each other */
        .column {
            float: left;
            width: 50%;
            padding: 10px;
            height: 500px; /* Should be removed. Only for demonstration */
        }

        /* Clear floats after the columns */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }
        /* Style the buttons */
        .btn {
            border: none;
            outline: none;
            padding: 12px 16px;
            background-color: #f1f1f1;
            cursor: pointer;
        }

            .btn:hover {
                background-color: #ddd;
            }

            .btn.active {
                background-color: #666;
                color: white;
            }
    </style>
</head>
<body>

    <h2>List View or Grid View</h2>

    <p>Click on a button to choose list view or grid view.</p>

    <div id="btnContainer">
        <button class="btn" onclick="listView()"><i class="fa fa-bars"></i> List</button>
        <button class="btn active" onclick="gridView()"><i class="fa fa-th-large"></i> Grid</button>
    </div>
    <br>

    <div class="row">
        <div class="column" style="background-color: #ffffff;">
            <h2>Chart 1</h2>
            <div id="container_1"></div>
            <script src="~/js/Chart_1.js"></script>
        </div>
        <div class="column" style="background-color:#ffffff;">
            <h2>Chart 2</h2>
            <div id="container_2"></div>
            <script src="~/js/Chart_2.js"></script>
        </div>
    </div>

    <div class="row">
        <div class="column" style="background-color:#ffffff;">
            <h2>Chart 3</h2>
            <div id="container_3"></div>
            <script src="~/js/Chart_3.js"></script>
        </div>
        <div class="column" style="background-color:#ffffff;">
            <h2>Chart 4</h2>
            <div id="container_4"></div>
            <script src="~/js/Chart_4.js"></script>
        </div>
    </div>

    <script>
        // Get the elements with class="column"
        var elements = document.getElementsByClassName("column");

        // Declare a loop variable
        var i;

        // List View
        function listView() {
            for (i = 0; i < elements.length; i++) {
                elements[i].style.width = "100%";
            }
        }

        // Grid View
        function gridView() {
            for (i = 0; i < elements.length; i++) {
                elements[i].style.width = "50%";
            }
        }

        /* Optional: Add active class to the current button (highlight it) */
        var container = document.getElementById("btnContainer");
        var btns = container.getElementsByClassName("btn");
        for (var i = 0; i < btns.length; i++) {
            btns[i].addEventListener("click",function () {
                var current = document.getElementsByClassName("active");
                current[0].className = current[0].className.replace(" active","");
                this.className += " active";
            });
        }
    </script>

</body>
</html>

JavaScript

$(document).ready(function () {




    /*
     Load the data from the CSV file. This is the contents of the file:
     
        Apples,Pears,Oranges,Bananas,Plums
        John,8,4,6,5
        Jane,3,2,3
        Joe,86,76,79,77
        Janet,16,13,15
        
     */
    Highcharts.chart('container_1',{
        chart: {
            type: 'line',zoomType: 'x',data: []
        },title: {
            text: 'Vehicle Count with Classification'
        },subtitle: {
            text: '2018-8058 Puchong Survey: Direction 1: From Bandar Puteri Puchong/Cyberjaya to Bandar Puchong Jaya/ Taman Kinrara'
        },yAxis: {
            title: {
                text: 'Total Count'
            }
        }
    });




});

如何使用Ajax GET和POST并将表中的输出更改为dataType json？

如何解决如何使用Ajax GET和POST并将表中的输出更改为dataType json？

相关推荐