Javascript 如何使用ajax动态加载选择选项值_Javascript_Ajax_Jsp

Javascript 如何使用ajax动态加载选择选项值

javascript ajax jsp

Javascript 如何使用ajax动态加载选择选项值,javascript,ajax,jsp,Javascript,Ajax,Jsp,我不熟悉ajax。选中复选框后，我希望我的选择组合框字段通过ajax动态加载。我想要的是，当我点击复选框时，ajax应该从two.jsp文件中获取数据，并在one.jsp one.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona

我不熟悉ajax。选中复选框后，我希望我的选择组合框字段通过ajax动态加载。我想要的是，当我点击复选框时，ajax应该从

two.jsp

文件中获取数据，并在

one.jsp

one.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>Insert title here</title>
<script>
function go_here(){
    if(document.getElementById('c1').checked){
        var xRequest1;

        //if(string1=="")
        //{
        //document.getElementById("Offer_id").innerHTML="";
        //return;
        }
        if(window.XMLHttpRequest)
        {
        xRequest1=new XMLHttpRequest();
        }
        else
        {
        xRequest1=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xRequest1.onreadystatechange=function ()
        {
        if((xRequest1.readyState==4) && (xRequest1.status==200))
        {
        document.getElementById("s1").innerHTML=xRequest1.responseText;
        }
        }

        xRequest1.open("get","two.jsp","true");

        xRequest1.send();    


    }
    else{

    }
}
</script>
</head>
<body>
<input type="checkbox" id="c1" onclick="go_here();"><br>
<select  name="Offer_id"  id='s1'  >

</select>
</body>
</html>


在此处插入标题
函数go_here（）{
if（document.getElementById（'c1'）。选中）{
var x1；
//如果（string1==“”）
//{
//document.getElementById（“Offer_id”）.innerHTML=“”；
//返回；
}
if（window.XMLHttpRequest）
{
xRequest1=newXMLHttpRequest（）；
}
其他的
{
xRequest1=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
xRequest1.onreadystatechange=函数（）
{
if（（xRequest1.readyState==4）和&（xRequest1.status==200））
{
document.getElementById（“s1”）.innerHTML=xRequest1.responseText；
}
}
open（“get”、“two.jsp”、“true”）；
xRequest1.send（）；
}
否则{
}
}

two.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <option value="5234">abc1</option>
    <option value="5235">abc2</option>
    <option value="4947">abc2</option>
    <option value="5210">abc2</option>
    <option value="5208">abc2</option>
    <option value="5209">abc2</option>
    <option value="3974">abc100</option>
</body>
</html>


在此处插入标题
abc1
abc2
abc2
abc2
abc2
abc2
abc100

但我无法填充选择框的选项字段。有人能告诉我哪里错了吗？

由于您试图将selects innerHTML设置为responseText，因此您试图将描述page two.jsp的整个文本“粘贴”到select中

除了强烈反对使用html文档而不是xml或json传输选项数据外，您还可以：

1）将two.jsp页面解析为一个实时html文档，并使用选择器将select的innerHTML设置为two.jsp文档主体的innerHTML

或

2）将responseText中的字符串切碎，这样您就只剩下选项，并使用该字符串设置HTML。

这样做不正确。您需要更改two.jsp以返回数据（XML或JSON），而不是HTML页面。然后，AJAX将获取数据并在其中循环，以创建并将选项添加到控件中

可选地，如果您真的希望您的ToO.jSP生成控件的HTML选项（尽管有些人会认为这是一个糟糕的设计），您可以在ToO.jSP中创建一个函数，只返回所需的HTML。AJAX将通过调用该函数获取HTML，然后将HTML分配给控件的

innerHTML

属性

快速修复方法是将two.jsp更改为：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<option value="5234">abc1</option>
<option value="5235">abc2</option>
<option value="4947">abc2</option>
<option value="5210">abc2</option>
<option value="5208">abc2</option>
<option value="5209">abc2</option>
<option value="3974">abc100</option>


abc1
abc2
abc2
abc2
abc2
abc2
abc100

我想您应该在这里对括号进行注释：://document.getElementById（“Offer_id”）.innerHTML=“”//返回；}