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

我想填充一个使用AJAX的选择框，从两个页面获取其数据。 mainPage.jsp具有下面的代码..使用AJAX从两页数据填充网页

<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>

这应该像我选择的产品，根据其值，模特们从 NewFile.jsp填充。这工作正常。在NewFile.jsp中，在选择型号时，价格将使用值selProduct和selModel填充。当我运行NewFile.jsp时，此价格正在填充，但是当我运行mainFile.jsp时，selModel正在从NewFile.jsp通过为null至selPrice.jsp。所以我被困在那里。我可能在这里做错了事，但我无法发现它。所以任何帮助在这里都会很棒。

谢谢

来源

2014-10-17 Piyush Kumar

哪里是e？你传递给函数，通过Id ???你在哪里通过？函数loadXMLDoc（）函数byId（e）{return document.getElementById（e）;}' – Divya 2014-10-17 13:38:43

e是通用的。每当id传入byID（id）时，它就会返回值。 – 2014-10-25 06:06:34

是的，我可以看到从我们的代码，但它似乎值e检查it.as你只调用loadxmldoc函数只有你会在这个价值，我认为你hvnt收到 – Divya 2014-10-25 12:18:19

有很多方法可以使用。

例如，你可以在一个临时数据库表中存储，你需要的记录或更好的办法可以使用下面的代码：

localStorage.setItem("ID", MyVar);

然后用

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

阅读来自其他页面的价值

希望我的英语很清楚。

来源

2014-10-17 13:26:07

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

回答

相关问题