今天看啥 热点：
ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据，ajaxashx摘要：最近在写网站，好不容易弄好了需求又变了，没错企业的门户网站硬要弄成后台管理系统一样，没办法作为小工的我只能默默的改。前台HTML页面需要提交数据到后台处理，又不能用form表单，于是乎研究了1天终于弄出来了。尝试了好多种方法最后还是用ajax解决了好了废话不多说了直接进入正题。
& & & 实现的功能里面的数据提交保存到数据库，同事对数据进行验证，这是要实现的效果，由于cms的原因这里只能添加html页面不能用aspx。
& & &1、页面布局好了首先你要添加jquery文件（这个百度自己下载）在写Ajax方法 前台是这样的。你会发现我只是用按钮提交的没有用表单，因为下面要拼接表格
&div class="yjdjfm"&
&div class="yjdjfd"&
&li&&span&仪检名称：&/span&&input id="txtyjneme" name="txtyjneme" type="text" value="" required="required"
oninvalid="setCustomValidity('必须填写！');" oninput="setCustomValidity('');"
/&&strong&*&/strong&&i class="yz_name" style="display: color:"&请填写仪检名称&/i&&/li&
&li&&span&规格型号：&/span&&input id="txtyjxh" name="txtyjxh" type="text" value="" autofocus="autofocus" placeholder="" /&&strong&*&/strong&&i class="yz_xh" style="display: color:"&请填写规格型号&/i&&/li&
&li&&span&出厂编号：&/span&&input id="txtyjnumber" name="txtyjnumber" type="text" value="" /&&strong&*&/strong&&i class="yz_bh" style="display: color:"&请填写设备编号&/i&&/li&
&ul style="float: margin-top:-122"&
&li&&span&登记日期：&/span&&input id="txtyjdate" name="txtyjdate" type="text" value="" readonly /&&strong&*&/strong&&i
style="color:#d0"&系统默认时间&/i&&/li&
&li&&span&登&记&&人：&/span&&input id="txtyjperson" name="txtyjperson" type="text" value="" /&&strong&*&/strong&&i class="yz_person" style="display: color:"&请填写您的姓名&/i&&/li&
&li&&span&联系电话：&/span&&input id="txtyjphone" name="txtyjphone" type="number" value="" /&&strong&*&/strong&&i class="yz_phone" style="display: color:"&请正确填写手机号码&/i&&/li&
&button class="yjdjtjan" id="btntj"&添加记录&/button&
&div style="clear:"&&/div&
&div class="yjdjlist"&
&table id="tttab"&
&tr id="yjdjtrone"&
&td&序号&/td&
&td&仪检名称&/td&
&td&规格型号&/td&
&td&出厂编号&/td&
&td&登记日期&/td&
&td&登&记&&人&/td&
&td&联系电话&/td&
&/table&&/div&
& & &2、验证数据Ajax提交
&script type="text/javascript"&
function cheack()
var _yjname = $("#txtyjneme").val();//jQuery获取文本框仪检名称值
var _yjxh = $("#txtyjxh").val();
var _yjbh = $("#txtyjnumber").val();
var _yjperson = $("#txtyjperson").val();
var _yjphone = $("#txtyjphone").val();
if (_yjname == "") { $(".yz_name").css({ display: "block", float: "right" }); return false; } else { $(".yz_name").css("display","none") }
if (_yjxh == "") { $(".yz_xh").css({ display: "block", float: "right" }); return false; } else { $(".yz_xh").css("display", "none") }
if (_yjbh == "") { $(".yz_bh").css({ display: "block", float: "right" }); return false; } else { $(".yz_bh").css("display", "none") }
if (_yjperson == "") { $(".yz_person").css({ display: "block", float: "right" }); return false; } else { $(".yz_person").css("display", "none") }
if (!(/^1[34578]\d{9}$/.test(_yjphone)) && _yjphone.length == 11) { $(".yz_phone").css("display", "none"); return true;}else { $(".yz_phone").css({ display: "block", float: "right" }); return false;}}
$(document).ready(function () {
var d = new Date();
var cs = 1;
$("#txtyjdate").val(d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate());
$("#btntj").click(function () {
if (cheack() == false) { return;}
var _name = $("#txtyjneme").val();
var _xh = $("#txtyjxh").val();
var _number = $("#txtyjnumber").val();
var _date = $("#txtyjdate").val();
var _person = $("#txtyjperson").val();
var _phone = $("#txtyjphone").val();
like = window.confirm("请仔细核对信息再提交，提交了就无法更改");
if (like == true) {
type:"post",
//提交方式
url: "{config.webpath}tools/submit_ajax.ashx",
//提交路径
data:{name:_name,xh:_xh,bh:_number,date:_date,person:_person,phone:_phone},//参数
success: function (result, status)//成功函数
alert("数据库保存成功！");
$("#tttab").append("&tr&&td&" + cs + "&/td&&td&" + _name + "&/td&&td&" + _xh + "&/td&&td&" + _number + "&/td&&td&" + _date + "&/td&&td&" + _person + "&/td&&td&" + _phone + "&/td&&/tr&");//拼接表格
$("input[name='txtyjneme']").val("");
$("input[name='txtyjxh']").val("");
$("input[name='txtyjnumber']").val("");
$(".yjdjlist").css("display", "block");
error: function () { alert("添加失败，程序异常！"); return; }
else { return; }
& 3、重点说一下这个ajax提交这里：
type提交的方法一般我都是用post，get提交数据多了就不行；
URL：提交的路径以为提交到submit_ajax.ashx页面所以不需要写方法，它默认到submit_ajax页面里的ProcessRequest（）的方法中，之前我自己写了方法也制定到这个方法上 但是很遗憾没有获取到值，如果提交aspx页面就要写到页面的方法如：url: "{config.webpath}tools/submit_ajax.ashx/方法名",
data：数据参数，这边的name，xh，bh要跟取值的时候对应，
我没有写dataType，因为我取值不做处理就不以一般的json传值了，开始的时候我加了json发现到那边取值有点麻烦（可能我方法不对）；
4、来看一下后台
public void ProcessRequest(HttpContext context)
var name = HttpContext.Current.Request["name"];
var xh = HttpContext.Current.Request["xh"];
var bh = HttpContext.Current.Request["bh"];
var data = HttpContext.Current.Request["date"];
var person = HttpContext.Current.Request["person"];
var phone =HttpContext.Current.Request["phone"];
string _sql = string.Format("insert into InstrumentCheck(Name,Modle,Number,Person,Phone) values('{0}','{1}','{2}','{3}','{4}')",name,xh,bh,person, phone);
_sql.Replace("'", " ");
ExecuteNonQuery(_sql);
public static string connectionStringgg = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionS
/// &summary&
/// 插入数据
/// &/summary&
/// &param name="sql"&sql语句&/param&
/// &returns&影响的行数&/returns&
public void ExecuteNonQuery(string sql)
SqlConnection connection = new SqlConnection(connectionStringgg);
if(connection.State==ConnectionState.Closed)
connection.Open();
SqlCommand cmd = new SqlCommand(sql, connection);
cmd.ExecuteNonQuery();
你只要url指定这个页面 &它就会加载ProcessRequest(HttpContext context)这个方法；ajax传的值用var类型来接收。这里我就不写啥SqlDB类了。
5、添加一条成功的效果
添加2条拼接上去数据库也保存了
新手上路，请各位大牛有缘见者多多指教不足或者错的地方！
暂无相关文章
相关搜索：
相关阅读：
相关频道：
&&&&&&&&&&&&&&&&
Asp.Net教程最近更新其他回答(3)
data多半是null 。。
你可以看一下返回的数据是什么结构的。如果是文本可以直接写入，对象的话要解析一下的。
data?结构是什么样子?Object? &--&data...
data--&string--&$("input").text(data);
&&&您需要以后才能回答，未注册用户请先。查看:15131|回复：10
求 highCharts 报表从前台如何获取后台数据，简单详细 的demo,最好饼图，曲线图都有
小洋(on my way)
后台传的就是JSON，和其他前端框架一样，照着写就可以了。
51CTOjava板块讨论QQ群：【1000人群】2群：【可加】 & && && &欢迎热爱JAVA的来讨论^_^
我的个人网站--&
可以封装个HighCharts 的类 字段包含前台所需要的配置项&&
HighCharts chart=new HighCharts();
chart.setTitle(&&);
然后用gloogle 的Gson把chart转为JSON对象传回前台
chart.setJson(gson.toJson(chart));
$(function() {
& && && &chartData= eval('(' + '${chart.json!!}' + ')');
& && &&&$('#hightChart')
& && && && && & .highcharts(
& && && && && && && && &{
& && && && && && && && && &&&chart : {
& && && && && && && && && && &&&type : chartData.type
& && && && && && && && && & },
& && && && && && && && && & title : {
& && && && && && && && && && &&&text : chartData.title
& && && && && && && && && & },
& && && && && && && && && & subtitle : {
& && && && && && && && && && &&&text : chartData.subtitle
& && && && && && && && && & },
& && && && && && && && && & xAxis : {
& && && && && && && && && && &&&categories : chartData.xAxis
& && && && && && && && && & },
& && && && && && && && && & yAxis : {
& && && && && && && && && && &&&min : 0,
& && && && && && && && && && &&&title : {
& && && && && && && && && && && && &text : chartData.yAxisTitle
& && && && && && && && && && &&&}
& && && && && && && && && & },
& && && && && && && && && & tooltip : {
& && && && && && && && && && &&&headerFormat : '&span style=&font-size:10px&&{point.key}&/span&&table&',
& && && && && && && && && && &&&pointFormat : '&tr&&td style=&color:{series.color};padding:0&&{series.name}: &/td&'
& && && && && && && && && && && && && & + '&td style=&padding:0&&&b&{point.y} &/b&&/td&&/tr&',
& && && && && && && && && && &&&footerFormat : '&/table&',
& && && && && && && && && && &&&shared : true,
& && && && && && && && && && &&&useHTML : true
& && && && && && && && && & },
& && && && && && && && && & series :[{
& && && && && && && && && && && &&&name: chartData.series[0].name,
& && && && && && && && && && && &&&data: chartData.series[0].data
& && && && && && && && && &&&}],
& && && && && && && && && &&&exporting: {
& && && && && && && && && && && && &buttons: {
& && && && && && && && && && && && && & contextButton: {
& && && && && && && && && && && && && && &&&menuItems:[{
& && && && && && && && && && && && && && && && && && &textKey : 'downloadExcel',
& && && && && && && && && && && && && && && && && && &onclick: function() {
& && && && && && && && && && && && && && && && && && &&&var type='application/msexcel';
& && && && && && && && && && && && && && && && && && &&&json(type);
& && && && && && && && && && && && && && && && && && &&&}
& && && && && && && && && && && && && && &&&}],
& && && && && && && && && && && && && & }
& && && && && && && && && && && && &}
& && && && && && && && && && &&&}
& && && && && && && && &});
对应不同的类型图只要修改一下相关的配置项就可以了，推荐你去看下 HighCharts 中文网 。希望对你有帮助！
本帖最后由 zhjfit 于
18:25 编辑
引用:原帖由 zhjfit 于
18:23 发表
可以封装个HighCharts 的类 字段包含前台所需要的配置项&&
HighCharts chart=new HighCharts();
chart.setTitle(&&);
然后用gloogle 的Gson把chart转为JSON对象传回前台
chart.setJson(gson.toJson(chart)); ... 谢谢，已解决
引用:原帖由 long2013cs神 于
09:59 发表
谢谢，已解决 楼主，看到您已经解决了，可以把您的解决方法代码发给我一份吗？&&我想做一个动态曲线图，可不知道如何后台传数据，可以吗？& & 我的邮箱：
变量在action中get、set 到前台就直接可以用s或者c标签读取出来了 例如
action中有个变量 private S (get、set方法添加),那么你在前台
就直接写&c:out value=&${name}&& 就有了。
可以封装个HighCharts 的类 字段包含前台所需要的配置项
你这里是如何解决的，求解。谢谢
引用:原帖由 nice230 于
12:13 发表
可以封装个HighCharts 的类 字段包含前台所需要的配置项
你这里是如何解决的，求解。谢谢 jsp &%@ page contentType=&text/ charset=UTF-8& pageEncoding=&UTF-8&%&
& & & & String path = request.getContextPath();
& & & & String basePath = request.getScheme() + &://& + request.getServerName() + &:& + request.getServerPort() + path + &/&;
& & & & &head&
& & & & & & & & &title&Highcharts Example&/title&
& & & & & & & & &script type=&text/javascript& src=&../js/jquery/jquery.min.js&&&/script&
& & & & & & & & &script src=&../Highcharts-3.0.10/js/highcharts.js&&&/script&
& & & & & & & & &script src=&../Highcharts-3.0.10/js/modules/exporting.js&&&/script&
& & & & & & & & &script type=&text/javascript&&
& & & & & & & & var xmlrequest =
& & & & & & & & var pie =
& & & & & & & & //var data = [{name:'Firefox',y: 105.0},{name: 'Chrome',y: 12.8,sliced: true,selected: true}];& & & &
& & & & $(document).ready(function () {
& & & & //alert('ready');
& & & & & & & & & & var result =&&$.ajax({
& && && && && &url: &&%=basePath%&json/test.json&,
& && && && && &type: &GET&,
& && && && && &dataType: &json&,
& && && && && &async:true,
& && && && && &success:function(data){
& && && && &&&& & & & alert('success');
& && && && && && & & &
& && && && && &},
& && && && &&&complete:function (XMLHttpRequest){
& && && && & & & & &&&xmlrequest=XMLHttpR
& && && && & & & & &&&if(200 == xmlrequest.status){
& && && && & & & & &&&& & & & var txt = xmlrequest.responseT
& && && && & & & & &&&& & & & //alert(txt);
& && && && & & & & &&&& & & & var json = eval('('+txt+')');
& && && && & & & & &&&& & & & //alert(json.data);
& && && && & & & & &&&& & & & data =
& && && && & & & & &&&& & & & // createPie();
& && && && & & & & &&&& & & & pie = createPie(data);
& && && && & & & & &&&& & & & }
& && && && && & & & else{
& && && && & & & & &&&& & & &
& && && && & & & & &&&}
& && && && & & & & && &
& && && && &&&}
& & & & & &
& & & & & & });
& & function createPie(data){
& & & & & & Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
& & & & & & & && &&&& & & & return {
& & & & & & & && && &&&& & & &&&radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
& & & & & & & && && && & stops: [
& & & & & & & && && && && & [0, color],
& & & & & & & && && && && & [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
& & & & & & & && && && & ]
& & & & & & & && &&&& & & & };
& & & & & & & & & & & & });
& & & & & & & & // Build the chart
& && & var t = $('#container').highcharts({
& && && && &chart: {
& && && && &//主图表区背景色，即x轴与y轴围成的区域背景色
& && && && && & plotBackgroundColor: null,
& && && && &//主图表区边框的宽度
& && && && && & plotBorderWidth: null,
& && && && &//是否设置阴影
& && && && && & plotShadow: false
& && && && &},
& && && && &title: {
& && && && && & text: '资产对比图',
& && && && && & //x 设置标题距离
& && && && && &&&x: 0
& && && && &},
& && && && &//plotOptions 用于设置图表中的数据点相关属性。
& && && && & //tooltip:用于设置当鼠标滑向数据点时，显示的提示框信息
& && && && &tooltip: {
& && && && && & & & //pointFormat,字符串，工具提示改点线的html,变量用花括号括起来，
& && && && && & & & //可用的变量是point.x,point.y,series.name和series.color和相同的
& && && && && & & & //表单上的其他属性，此外，point.y可以通过延长tooltip.yPrefix和
& && && && && & & & //tooltip.ySuffix变量，
& && && && && & & & enabled:true,
& && &&&& & & && &&&pointFormat: '{series.name}: &b&{point.percentage:.1f}%&/b&'
& && && && &},
& && && && &plotOptions: {
& && && && && & pie: {
& && && && && && &&&allowPointSelect: true,
& && && && && && &&&cursor: 'pointer',
& && && && && && &&&dataLabels: {
& && && && && && &&&& & & & // enabled，是否在数据点上显示数据
& && && && && && && && &enabled: true,
& && && && && && && && &color: '#000000',
& && && && && && && && &connectorColor: '#000000',
& && && && && && && && &formatter: function() {
& && && && && && && && && & return '&b style=&font-size:5px&&'+ this.point.name +'&/b&: '+ this.percentage +' %';
& && && && && && && && &}
& && && && && && &&&}
& && && && && & }
& && && && &},
& && && && &
& && && && &series:[{
& && && && && & type: 'pie',
& && && && && & name: 'Browser share',
& && && && && & data:data
& && && && &}],
& && && && &// 去掉源代码'' 字样
& & & & & & & & & & credits: {
& && && && &&&text: '',
& && && && &&&href: ''
& && && & },
& && &&&});& & & & & & & & & & & &
& & & & & & & & &/script&
& & & & &/head&
& & & & &body&
& & & & & & & & &div id=&container&
& & & & & & & & & & & & style=&min-width: 310 height: 400 margin: 0 auto&&&/div&
& & & & &/body&
& & & & {name:'Firefox',y: 15.0},
& & & &&&{name: 'Chrome',y: 12.8,sliced: true,selected: true}
& & & &&&]
你所需要做的就是在后台拼接成json数据，传到前台
引用:原帖由 long2013cs神 于
11:22 发表
Highcharts Example
var xmlrequest =
//var data = [{name:'Firefox',y: 105.0},{name: 'Chrome',y: 12.8,sliced: true,selected: true}];
$(document).re ... //后台控制器中（SpringMVC）
@RequestMapping(value=&/getAll&,method=RequestMethod.POST)
& && &&&@ResponseBody
& && &&&public List&UserOnlineNum& getAll(HttpServletRequest request,HttpServletResponse response ) throws Exception{
& && && && && & UserOnlineNum onlineNum = new UserOnlineNum();
& && && && && & List&UserOnlineNum& list = onlineNumService.findLists(onlineNum);
& && && && && & JsonWriteUtil.writeJson(response, list);
& && && && && &
$(document).ready(function() {&&
& & Highcharts.setOptions({&&
& && &&&global: {&&
& && && && &useUTC: false&&
& && &&&}&&
& & chart = new Highcharts.Chart({&&
& && &&&chart: {&&
& && && && &renderTo: 'container',&&
& && && && && && &&&type: 'spline',& &//图表类型 line, spline, area, areaspline, column, bar, pie , column，scatter
& && && && &marginRight: 10,& &
& && && && &events: {&&
& && && && && & load: function () {& &
& && && && && && &&&var series = this.series[0];&&
& && && && && && &&&var loaddata = function () {&&
& && && && && && && && &$.ajax({&&
& && && && && && && && && & async: false,&&
& && && && && && && && && & type: &POST&,&&
& && && && && && && && && & dataType: &json&,&&
& && && && && && && && && & contentType: &application/charset=utf-8&,&&
& && && && && && && && && & url: &./getAll&, //读取数据&&
& && && && && && && && && & success: function (result) {&&
& && && && && && && && && && && && &// 时间
& && && && && && && && && && && && &var dates = new Array();
& && && && && && && && && && && && &// 人数
& && && && && && && && && && && && &var nums = new Array();
& && && && && && && && && && && && &
& && && && && && && && && && && && &for(var i = 0;i& list.i++){
& && && && && && && && && && && && && && &&&// 把时间添加到集合中
& && && && && && && && && && && && && && &&&dates.push(list.datetime);
& && && && && && && && && && && && && && &&&// 把人数添加到集合中
& && && && && && && && && && && && && && &&&nums.push(list.num);
& && && && && && && && && && && && &}
& && && && && && && && && && && && &// 把日期和人数集合转换成JSON
& && && && && && && && && && && && &var dateJson = eval(&(&+dates+&)&);
& && && && && && && && && && && && &alert(dateJson)
& && && && && && && && && && && && &var numJson = eval(&(&+nums+&)&);
& && && && && && && && && && && && &alert(numJson)
& && && && && && && && && & }&&
& && && && && && && && &});&&
& && && && && && && && &series.addPoint([dates, nums], true, true);&&
& && && && && && &&&};&&
& && && && && && & // setInterval(loaddata, 300000);//每5分钟执行一次&&
& && && && && & }&&
& && && && &}&&
& && && &},
& && &&&xAxis: {
& && && && && & categories: dateJson,//xAxisstr为时间hh:mm
& && && && && & tickPixelInterval: 100
& && &&&},
& && &&&yAxis: {& &
& && && && &min: 0,
& && && && &title: {text: '数量（天/充值数）'}& && && & //Y轴坐标标题&&labels:纵柱标尺
& && &&&},&&
& && &&&legend: {& && && && && && && && && && & //【图例】位置样式
& && && && &layout: 'horizontal',& && && && && &//【图例】显示的样式：水平（horizontal）/垂直（vertical）
& && && && &backgroundColor: '#FFFFFF',
& && && && &borderColor: '#CCC',
& && && && &borderWidth: 1,
& && && && &align: 'center',
& && && && &verticalAlign: 'top',
& && && && &enabled:true,
& && && && &y: 50,
& && && && &shadow: true
& && &&&},
& && &&&tooltip: {&&
& && && && && & //当鼠标悬置数据点时的格式化提示&&
& && && && && & formatter: function() {
& && && && && & return '实际在线人数:' + Highcharts.numberFormat(this.y, 1) +'人' +'&br/&当前时间点：'+
& && && && && & Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x,2) +'&br/&';
& && && && && & }
& && &&&},&&
& && &&&credits: {
& && && && &enabled: false
& && &&&},
& && &&&title: { text: '用户在线人数' }, //图表主标题&&
& && &&&subtitle: {text: '（日）' }, //图表副标题&&
& && && && && & series : [ {
& && && && && && && && &name : '盛迅达',
& && && && && && && && &data :&&numJson& && &&&
& && && && && & }]
});& && &&&
殊不知哪里还有错误，在前台获取不到页面。x轴是放数据库里面的时间点字段（6:30） 每5分钟刷新数据，Y轴是人数。
本帖最后由 nice230 于
10:05 编辑
那个封装highcharts的类代码应该如何写呢 能给我发一份 我的邮箱是 谢谢
那个封装的highcharts应该如何写呢 可以给我也发一份吗 我用的是spring mvc框架