echarts通过ajax向服务器发送post请求,servlet从数据库读取数据并返回前端
我的图书馆
echarts通过ajax向服务器发送post请求,servlet从数据库读取数据并返回前端
标签：&&&&&&&&&&&&&&&&&&&&&&&&1.echarts的官网上的demo，都是直接写死的随机数据，没有和数据库的交互，所以就自己写了一下，ok，我们开始一步一步走一遍整个流程吧。
就以官网最简单的那个小demo来做修改吧。官网上的小demo的效果图如下：（很熟悉，有没有）
2.按照echarts的使用方法新建一个echarts.html文件。为ECharts准备一个具备大小（宽高）的Dom(讲的有点细，熟悉的朋友直接跳过)
&!DOCTYPE html&
&meta charset="utf-8"&
&title&ECharts&/title&
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
&div id="main" ="height:400px"&&/div&
新建&script&标签引入符合AMD规范的加载器，如esl.js，引入jquery为等一下AJAX发送POST请求做准备
&script src="echarts/esl.js"&&/script&
&script src="echarts/jquery.min.js"&&/script&
// 路径配置
require.config({
‘echarts‘ : ‘echarts/echarts‘,
‘echarts/chart/bar‘ : ‘echarts/echarts‘
最后是使用：以下代码是官网上的，红色部分的data数据等一下我们修改一下从数据库中去读取
‘echarts‘,
‘echarts/chart/bar‘ // 使用柱状图就加载bar模块，按需加载
function (ec) {
// 基于准备好的，初始化echarts图表
var myChart = ec.init(document.getElementById(‘main‘));
var option = {
tooltip: {
show: true
:[‘销量‘]
type : ‘category‘,
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
type : ‘value‘
series : [
"name":"销量",
"type":"bar",
"":[5, 20, 40, 10, 10, 20]
// 为echarts对象加载数据
myChart.setOption(option);
整个前段页面的代码如下：主要就是修改了option中的xAxis的和series中的data,这2个data在官网的demo中都是直接写死的,这里我们采用AJAX发送post请求
&!DOCTYPE html&
&meta charset="utf-8"&
&title&ECharts&/title&
&!-- 来自百度CDN --&
&script src="echarts/esl.js"&&/script&
&script src="echarts/jquery.min.js"&&/script&
&!-- 为ECharts准备一个具备大小（宽高）的Dom --&
&div id="main" ="height:400px"&&/div&
&script type="text/script"&
// 路径配置
require.config({
‘echarts‘ : ‘echarts/echarts‘,
‘echarts/chart/bar‘ : ‘echarts/echarts‘
‘echarts‘,
‘echarts/chart/bar‘ // 使用柱状图就加载bar模块，按需加载
drewEcharts
function drewEcharts(ec) {
// 基于准备好的，初始化echarts图表
myChart = ec.init(document.getElementById(‘main‘));
var option = {
tooltip: {
show: true
:[‘销量‘]
type : ‘category‘,
data : (function(){
var arr=[];
type : "post",
async : false, //同步执行
url : "bar.do",
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
for(var i=0;i&result.i++){
console.log(result[i].name);
arr.push(result[i].name);
error : function(errorMsg) {
alert("不好意思，大爷，图表请求数据失败啦!");
myChart.hideLoading();
type : ‘value‘
series : [
"name":"销量",
"type":"bar",
"data":(function(){
var arr=[];
type : "post",
async : false, //同步执行
url : "bar.do",
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
for(var i=0;i&result.i++){
console.log(result[i].num);
arr.push(result[i].num);
error : function(errorMsg) {
alert("不好意思，大爷，图表请求数据失败啦!");
myChart.hideLoading();
// 为echarts对象加载数据
myChart.setOption(option);
3.在前一步中AJAX的POST请求的路径是&url : "bar.do" 在web.xml中配置以下映射如下图：
&servlet-name&helloBar&/servlet-name&
&<span style="color: #800
Connection conn =
conn = dataSource.getConnection();
}catch(SQLException e){}
public ArrayList&barBean& select_all()
Connection conn =
PreparedStatement pstmt =
ResultSet rst =
conn = Source.getConnection();
pstmt = conn.prepareStatement(SELECT_ALL);
rst = pstmt.executeQuery();
ArrayList&barBean& array = new ArrayList&barBean&();
while(rst.next())
barBean bar = new barBean();
bar.setName(rst.getString("name"));
bar.setNum(rst.getInt("num"));
array.add(bar);
pstmt.close();
rst.close();
}catch(SQLException e){
System.out.println("Error occured at barDAO-&select_all()");
return new ArrayList&barBean&();
conn.close();
}catch(SQLException e){
System.out.println("Error occured at closing connection in barDAO");
4.前段的页面在确认请求success以后，读取返回后的数组的内容。就可以显示了。
&标签：&&&&&&&&&&&&&&&&&&&&&& &
TA的最新馆藏[转]&
喜欢该文的人也喜欢jQuery通过Ajax向PHP服务端发送请求并返回JSON数据
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据,设计到的知识点有jquery、ajax、php、json，感兴趣的朋友一起学习下jquery ajax 返回json
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写，同时也易于机器解析和生成。JSON在前后台交互的过程中发挥着相当出色的作用。
服务端PHP读取MYSQL数据，并转换成JSON数据，传递给前端Javascript，并操作JSON数据。本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据。阅读本文的读者应该具备jQuery、Ajax、PHP相关知识，并能熟练运用。
&ul id="userlist"&
&li&&a href="#" rel="1"&张三&/a&&/li&
&li&&a href="#" rel="2"&李四&/a&&/li&
&li&&a href="#" rel="3"&王五&/a&&/li&
&div id="info"&
&p&姓名：&span id="name"&&/span&&/p&
&p&性别：&span id="sex"&&/span&&/p&
&p&电话：&span id="tel"&&/span&&/p&
&p&邮箱：&span id="email"&&/span&&/p&
实例中，显示了一个用户姓名列表ul#userlist，一个用户详细信息层#info。值得注意的是，我给每个&a&标签设置属性“rel”并赋值，这个很重要，将在jQuery中使用。我要实现的效果就是：当点击用户列表中任意用户的姓名，将即时显示出该用户的详细信息，如电话、EMAIL等。
#userlist{margin:4 height:42px}
#userlist li{float: width:80 line-height:42 height:42 font-size:14&
font-weight:bold}
#info{clear: padding:6 border:1px solid #b6d6e6; background:#e8f5fe}
#info p{line-height:24px}
#info p span{font-weight:bold}
CSS设置了用户列表和用户详细信息的显示外观，您也可以自己设计一个好看的外观。
使用jQuery前，别忘了先要确保载入的jQuery库。
&script type="text/javascript" src="../js/jquery.js"&&/script&
接下来开始写jQuery代码了。
$(function(){
$("#userlist a").bind("click",function(){
var hol = $(this).attr("rel");
var data = "action=getlink&id="+
$.getJSON("server.php",data, function(json){
$("#name").html(json.name);
$("#sex").html(json.sex);
$("#tel").html(json.tel);
$("#email").html(json.email);
我给用户列表的每个&a&标签都绑定一个click事件，当单击用户姓名时，执行以下操作：获取当前标签的属性“rel”的值，并组成一个数据串：var data = "action=getlink&id="+hol，接着通过ajax向服务端server.php发送JSON请求，得到后台响应后，返回JSON数据，并将得到的数据显示在用户详细信息中。
后台server.php得到前端的Ajax请求后，通过传递的参数连接数据库并查询用户表，将相应的用户信息转换成一个数组$list，最后将数组转换成JSON数据。关于PHP与JSON的操作可以查看本站收集的文章：PHP中JSON的应用。以下是server.php的详细代码，其中数据连接部分省略，请大家自行建立数据连接。
include_once("connect.php"); //连接数据库
$action=$_GET[action];
$id=intval($_GET[id]);
if($action=="getlink"){
$query=mysql_query("select * from user where id=$id");
$row=mysql_fetch_array($query);
$list=array("name"=&$row[username],"sex"=&$row[sex],"tel"=&$row[tel],"email"=&$row[email]);
echo json_encode($list);
通过本文可以知道jQuery通过Ajax向服务端发送JSON请求，使用方法$.getJSON非常方便简单。并且可以将服务端返回的数据进行解析，得到相应字段的内容，相比像HTML请求返回的一大串字符串那样处理方便快捷。
最后附上mysql表结构
CREATE TABLE IF NOT EXISTS `user` (
`id` int(11) NOT NULL auto_increment,
`username` varchar(100) NOT NULL,
`sex` varchar(6) NOT NULL,
`tel` varchar(50) NOT NULL,
`email` varchar(64) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
好了，本文的全部叙述就到此结束了，欲了解更多有关jquery ajax json方面的知识请登录脚本之家()网站了解详情。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具前端问题，正常的href请求和ajax请求的区别在哪里，一个是页面跳转，一个是消息通信？ - 知乎9被浏览2229分享邀请回答02 条评论分享收藏感谢收起11 条评论分享收藏感谢收起