Javascript 如何使用Ajax GET和POST并将表中的输出更改为数据类型json?
我想使用Highcharts制作与MySQL Workbench连接的图表。我已经连接到数据库并以表格的形式显示数据。但是现在我想使用ajax get和post获取表中的数据,以便与图表(javascript文件)连接。现在,我在如何将数据类型更改为json方面遇到了一个问题,我并不真正理解如何使用ajax,但我知道这是可能的。我使用了MVC asp.NETCore3.1。这是我的密码:Javascript 如何使用Ajax GET和POST并将表中的输出更改为数据类型json?,javascript,json,asp.net-core,model-view-controller,highcharts,Javascript,Json,Asp.net Core,Model View Controller,Highcharts,我想使用Highcharts制作与MySQL Workbench连接的图表。我已经连接到数据库并以表格的形式显示数据。但是现在我想使用ajax get和post获取表中的数据,以便与图表(javascript文件)连接。现在,我在如何将数据类型更改为json方面遇到了一个问题,我并不真正理解如何使用ajax,但我知道这是可能的。我使用了MVC asp.NETCore3.1。这是我的密码: 控制器 模型 HTML 正确加载HTML数据后,可以使用data.table功能将此数据加载到图表中1)现在
正确加载HTML数据后,可以使用
data.table
功能将此数据加载到图表中<代码>1)现在我想获取表中的数据,以便使用ajax get和post与图表(javascript文件)连接2)我有一个关于如何将数据类型更改为json的问题您能进一步说明需求和问题吗?这样我们才能更好地理解它。@SebastianWędzel谢谢,这很有效@谢谢你的回复!问题已经解决了。
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; }
}
}
@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>
$(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,4,2,3
Joe,86,76,79,77
Janet,3,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'
}
}
});
});