使用 Ajax 传递数组值联合应用程序
这是我的图表应用程序...
<script type="text/javascript" >
function listbox_moveacross(sourceID, destID)
{
var src = document.getElementById(sourceID);
var dest = document.getElementById(destID);
for(var count=0; count < src.options.length; count++) {
if(src.options[count].selected == true)
{
option = src.options[count];
newOption = document.createElement("option");
newOption.value = option.value;
newOption.text = option.text;
newOption.selected = true;
try {
dest.add(newOption,null); //Standard
src.remove(count,null);
alert("New Option Value: " + newOption.value);
}
catch(error)
{
dest.add(newOption); // IE only
src.remove(count);
alert("success IE User");
}
count--;
}
}
}
function printValues(oSel)
{
len=oSel.options.length;
for(var i=0;i<len;i++)
{
if(oSel.options[i].selected)
{
data+="\n"+ oSel.options[i].text + "["+ "\t" + oSel.options[i].value + "]";
}
}
type=document.getElementById("typeId");
type_text=type.options[type.selectedIndex].text;
type_value=document.getElementById("typeId").value;
}
function GetSelectedItem()
{
len = document.chart.d.length;
i = 0;
chosen = "";
for (i = 0; i < len; i++) {
if (document.chart.d[i].selected) {
chosen = chosen + document.chart.d[i].value + "\n"
}
}
return chosen
}
$(document).ready(function() {
var d;
var current_month;
var month;
var str;
var w;
var sel;
var sel_data;
var sel_data_value;
$('.submit').click(function(){
// to get current month
d=new Date();
w=document.chart.periodId.selectedIndex;
sel=document.chart.periodId.options[w].text;
for(i=sel;i>=1;i--)
{
alert(month[i]);
}
sel_data=document.chart.d.selectedIndex;
sel_data_value=document.chart.d.options[sel_data].text;
var data_len=document.chart.d.length;
var j=0;
var chosen="";
for(j=0;j<data_len;j++)
{
if(document.chart.d.options[i].selected)
{
chosen=chosen+document.chart.d.options[i].value;
}
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: document.chart.chartTitle.value
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: month
},
yAxis: {
min: 0,
title: {text: 'Count' }
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: sel_data_value,
data: [50, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
});
});
</script>
<%! Connection con = null;
Statement stmt = null;
ResultSet rs = null;
String url = "././sample";
String user = "sample";
String pass = "sample";
String query = "";
int mid;
%>
<%
Class.forName("org.postgresql.Driver");
con = DriverManager.getConnection(url, user, pass);
System.out.println("Connected to Database");
stmt = con.createStatement();
rs = stmt.executeQuery("select name,id from sam");
%>
</head>
<body>
<form method="post" name="chart">
<fieldset>
<legend>Chart Options</legend>
<br />
<label for="hstate">Plant:</label>
<select name="plantId" size="1" id="plantId" >
<% while (rs.next()) {
%>
<option value="<%=rs.getString("code")%>"><%=rs.getString("description")%></option>
<%
}
String plant = request.getParameter("hstate");
System.out.println("Selected Plant" + request.getParameterValues("plantId"));
%>
</select>
<br />
<label for="hcountry">Period</label>
<select name="periodId" id="periodId">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
</select>
<br/>
<label for="hstate" >Interval</label>
<select name="intervalId" id="intervalId">
<option value="day">Day</option>
<option value="month" selected>Month</option>
</select>
</fieldset>
<fieldset>
<legend>Chart Data</legend>
<br/>
<br/>
<table >
<tbody>
<tr>
<td>
 <select multiple name="data" size="5" id="s" style="width: 230px; height: 130px;" >
<option value="<%=field%>"><%=list[i]%></option>
<%
}
%>
</select>
</td>
<td>
<input type="button" value=">>" onclick="listbox_moveacross('s', 'd')" /><br/>
<input type="button" value="<<" onclick="listbox_moveacross('d', 's')" />  
</td>
<td>  
<select name="selectedData" size="5" id="d" style="width: 230px; height: 130px;">
</select></td>
</tr>
</tbody>
</table>
<br/>
</fieldset>
<fieldset>
<legend>Chart Info</legend>
<br/>
<label for="hstate" >Type</label>
<select name="typeId" id="typeId">
<option value="" selected>select...</option>
<option value="bar">Bar</option>
</select>
<br/>
<label for="uname" id="titleId">Title </label>
<input class="text" type="text" name="chartTitle"/>
<br />
<label for="uemail2">Pin to Dash board:</label>
<input class="text" type="checkbox" id="pinId" name="pinId"/>
</fieldset>
<input class="submit" type="button" value="Submit" />
<!--onclick="printValues(s)"-->
</form>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto">
</div>
</body>
</html>
使用 javascript 函数，将选定的列表框值存储在“sel_data_value”中。我需要将此选定的数组值传递到数据库以检索有关选择的值。我如何使用 ajax 来做到这一点。我不知道如何在ajax中传递数组值并从数据库中检索它。
谢谢。
This is my chart application...
<script type="text/javascript" >
function listbox_moveacross(sourceID, destID)
{
var src = document.getElementById(sourceID);
var dest = document.getElementById(destID);
for(var count=0; count < src.options.length; count++) {
if(src.options[count].selected == true)
{
option = src.options[count];
newOption = document.createElement("option");
newOption.value = option.value;
newOption.text = option.text;
newOption.selected = true;
try {
dest.add(newOption,null); //Standard
src.remove(count,null);
alert("New Option Value: " + newOption.value);
}
catch(error)
{
dest.add(newOption); // IE only
src.remove(count);
alert("success IE User");
}
count--;
}
}
}
function printValues(oSel)
{
len=oSel.options.length;
for(var i=0;i<len;i++)
{
if(oSel.options[i].selected)
{
data+="\n"+ oSel.options[i].text + "["+ "\t" + oSel.options[i].value + "]";
}
}
type=document.getElementById("typeId");
type_text=type.options[type.selectedIndex].text;
type_value=document.getElementById("typeId").value;
}
function GetSelectedItem()
{
len = document.chart.d.length;
i = 0;
chosen = "";
for (i = 0; i < len; i++) {
if (document.chart.d[i].selected) {
chosen = chosen + document.chart.d[i].value + "\n"
}
}
return chosen
}
$(document).ready(function() {
var d;
var current_month;
var month;
var str;
var w;
var sel;
var sel_data;
var sel_data_value;
$('.submit').click(function(){
// to get current month
d=new Date();
w=document.chart.periodId.selectedIndex;
sel=document.chart.periodId.options[w].text;
for(i=sel;i>=1;i--)
{
alert(month[i]);
}
sel_data=document.chart.d.selectedIndex;
sel_data_value=document.chart.d.options[sel_data].text;
var data_len=document.chart.d.length;
var j=0;
var chosen="";
for(j=0;j<data_len;j++)
{
if(document.chart.d.options[i].selected)
{
chosen=chosen+document.chart.d.options[i].value;
}
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: document.chart.chartTitle.value
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: month
},
yAxis: {
min: 0,
title: {text: 'Count' }
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: sel_data_value,
data: [50, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
});
});
</script>
<%! Connection con = null;
Statement stmt = null;
ResultSet rs = null;
String url = "././sample";
String user = "sample";
String pass = "sample";
String query = "";
int mid;
%>
<%
Class.forName("org.postgresql.Driver");
con = DriverManager.getConnection(url, user, pass);
System.out.println("Connected to Database");
stmt = con.createStatement();
rs = stmt.executeQuery("select name,id from sam");
%>
</head>
<body>
<form method="post" name="chart">
<fieldset>
<legend>Chart Options</legend>
<br />
<label for="hstate">Plant:</label>
<select name="plantId" size="1" id="plantId" >
<% while (rs.next()) {
%>
<option value="<%=rs.getString("code")%>"><%=rs.getString("description")%></option>
<%
}
String plant = request.getParameter("hstate");
System.out.println("Selected Plant" + request.getParameterValues("plantId"));
%>
</select>
<br />
<label for="hcountry">Period</label>
<select name="periodId" id="periodId">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
</select>
<br/>
<label for="hstate" >Interval</label>
<select name="intervalId" id="intervalId">
<option value="day">Day</option>
<option value="month" selected>Month</option>
</select>
</fieldset>
<fieldset>
<legend>Chart Data</legend>
<br/>
<br/>
<table >
<tbody>
<tr>
<td>
<select multiple name="data" size="5" id="s" style="width: 230px; height: 130px;" >
<option value="<%=field%>"><%=list[i]%></option>
<%
}
%>
</select>
</td>
<td>
<input type="button" value=">>" onclick="listbox_moveacross('s', 'd')" /><br/>
<input type="button" value="<<" onclick="listbox_moveacross('d', 's')" />
</td>
<td>
<select name="selectedData" size="5" id="d" style="width: 230px; height: 130px;">
</select></td>
</tr>
</tbody>
</table>
<br/>
</fieldset>
<fieldset>
<legend>Chart Info</legend>
<br/>
<label for="hstate" >Type</label>
<select name="typeId" id="typeId">
<option value="" selected>select...</option>
<option value="bar">Bar</option>
</select>
<br/>
<label for="uname" id="titleId">Title </label>
<input class="text" type="text" name="chartTitle"/>
<br />
<label for="uemail2">Pin to Dash board:</label>
<input class="text" type="checkbox" id="pinId" name="pinId"/>
</fieldset>
<input class="submit" type="button" value="Submit" />
<!--onclick="printValues(s)"-->
</form>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto">
</div>
</body>
</html>
using javascript function, am storing the selected listbox values in 'sel_data_value'. I need to pass this selected array values to database to retrieve values regarding selection. How can i do this using ajax. i don know how to pass array values in ajax and retrieve it from database.
Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
要将数组传递到后端，您可能需要将数组值连接成带有某种分隔符的字符串。然后，后端的脚本会将字符串拆分为各个值。
To pass an array to your backend, you will likely want to concatenate the array values into a string with some sort of delimiter. Your script on the backend would then split the string into the individual values.