使用AJAX根据两页数据填充网页

Question

我正在尝试使用从两个页面获取其数据的AJAX填充选择框。 mainPage.jsp具有以下代码。

<td>Product</td>
        <td><select name="selProduct" id="selProduct"  onchange='loadXMLDoc();' >
            <option value="-1"> Select Product</option>
            <option value="0"> JSA Three Wheelers</option>
            <option value="1"> Rotavators</option>
            <option value="2"> ACE Tractors</option>
            <option value="3"> BCS Reaper Binder</option>
            <option value="4"> Lubi Pumps</option>
            <option value="5"> New Golden Punjab Thresers</option>

          </select>
        </td>
        </tr>
        <tr>
        <td>Model</td>
        <td>
            <div id="myDiv">

            </div>



        </td>
        </tr>

函数loadXMLDoc()如下

function loadXMLDoc()
{
function byId(e) {return document.getElementById(e);}
var sel=byId('selProduct');
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","NewFile.jsp?str="+sel.value,true);
xmlhttp.send();
}

文件NewFile.jsp为

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Insert title here</title>
  <%  //String selProduct= request.getParameter("str");
  //int valProduct= Integer.parseInt(selProduct);
  String sel= request.getParameter("str");
  int valProduct= Integer.parseInt(sel);


 %>
<script>
function loadXMLDoc1()
{
  function byId(e) {return document.getElementById(e);}
  var selModel=byId('selModel');
  alert(selModel.value);
  var selProduct=<%=valProduct%>;

  var xmlhttp;
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  { 
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("divRate").innerHTML=xmlhttp.responseText;
    //document.getElementsByName(txtTest).Text=xmlhttp.responseText;

    }
  }
       xmlhttp.open("GET","selPrice.jsp?selProduct="+selProduct+"&"+"selModel="+selModel.value,true);
   xmlhttp.send();

}
 </script>
 </head>
 <body>


<select name="selModel1" id="selModel" onchange='loadXMLDoc1();'>
<option  value="-1">select Model </option>
 <%if(valProduct==0){ %>

 <option value="1">Victory 1000 DIII Passenger</option>
 <option value="2">Victory plus 1000 DIII Passenger </option>
 <option value="3">Victory 1000 DIII Loader </option>
 <option value="4">Victory 1000 DIII Chassis </option>
 <option value="5">Victory 1360 DIII Passenger </option>
 <option value="6">Victory 1360 DIII Window Dx Passenger </option>
 <option value="7">Victory 1360 DIII Loader </option>
 <%}
 else if (valProduct==1){%>


<option value="1">SRT-6/540 (SEMI CHAMPION)</option>
<option value="2">SRT-5.5/1000 (SEMI CHAMPION)</option>
<option value="3">SRT-6/1000 (SEMI CHAMPION)</option>
<option value="4">SRT-7/1000 (SEMI CHAMPION)</option>
<option value="5">SRT-5.5/MS LIGHT SERIES (1.65/1000)</option>
<option value="6">SRT-6/MS LIGHT SERIES (1.85/1000)</option>
<option value="7">SRT-7/MS LIGHT SERIES (2.05/1000)</option>
 <%} 
 else if (valProduct==2){%>


 <option value="1">Ace Tractors</option>
 <option value="2">Ace Tractors</option>
 <%} 
 else if (valProduct==3){%>


<option value="1">Complete Reaper Binder</option>
<option value="2">Tractor Mounted Reaper Binder</option>
<%} 
else if (valProduct==4){
%>

 <option value="1">MDH-50A (HP-0.5) Self Priming</option>
 <option value="2">MDH-27A (HP-0.5) Self Priming</option>
 <option value="3">MDH-27ASF (HP-1.0) Self Priming</option>
 <option value="4">MCJ051SP (HP-0.5) Shallow Well Jet</option>
 <option value="5">MCJ101SP (HP-1.0) Shallow Well Jet</option>
<%} %>
</select>
<div id="divRate"> 

</div>

</body>
</html>

selPrice.jsp也是如此。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

</head>
<body>
<% String selModel= request.getParameter("selModel");
String selProduct=request.getParameter("selProduct");
//int valModel=1;
int valProduct= Integer.parseInt(selProduct);
valModel= Integer.parseInt(selModel);
System.out.println(selModel);
System.out.println(valProduct);
System.out.println(valModel);
System.out.println(session.getAttribute("name"));
%>

<%if(valProduct ==0 && valModel==1 ){ %>
 <input type="text" value="173000" readonly="readonly">
<%} 
else if(valProduct ==0 && valModel==2 ){ %>
<input type="text" readonly="readonly" value="183000">
<%}
else if (valProduct==1 && valModel==1){%>
<input type="text" readonly="readonly" value="400000" >


<%} 
else if (valProduct==1 && valModel==2){%>
<input type="text" readonly="readonly" value="450000">
<%} %>


</body>
</html>

这应该像我选择Product一样工作，根据其值，从NewFile.jsp填充模型。 一切正常。 在NewFile.jsp ，在选择模型时，将使用值selProduct和selModel填充价格。 当我运行NewFile.jsp ，这个价格越来越填充，但是当我运行mainFile.jsp ， selModel被传递为null以selPrice.jsp从NewFile.jsp 。 所以我被困在那里。我可能在这里做错了什么，但我无法发现它。 因此，任何帮助在这里都将是很大的。

谢谢

Answer 1

您可以使用多种方法。

例如，您可以将存储在临时数据库表中，所需的记录或更好的方法可能是使用以下代码：

localStorage.setItem("ID", MyVar);

然后使用

var MyID= localStorage.getItem("ID");

从另一页读取值

希望我的英语说得清楚。

使用AJAX根据两页数据填充网页

问题描述

1 个解决方案

解决方案1
0 2014-10-17 13:26:07

使用AJAX根据两页数据填充网页

问题描述

1 个解决方案

解决方案1 0 2014-10-17 13:26:07

解决方案1
0 2014-10-17 13:26:07