Question

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

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>

但我无法填充选择框的选项字段。有人可以指导我在哪里错了..

Answer 1

由于您正在尝试将选择innerHTML设置为responseText，因此您试图在select中“粘贴”描述页面two.jsp的整个文本。

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

1）将two.jsp页面解析为实时html文档，然后使用选择器将select的innerHTML设置为body.jsp文档中bodyHTML的内部HTML。

OR

2）将responseText中的字符串剪切成碎片，这样你只剩下选项并使用该字符串设置你的选择innerhtml。

Answer 2

这不是正确的做法。您需要更改two.jsp以返回数据（XML或JSON）而不是HTML页面。然后你的AJAX将获取数据并循环通过它来创建＆amp;将选项添加到您的控件中。

或者，如果你真的希望你的two.jsp为控件生成HTML选项（尽管有些人会认为这是一个糟糕的设计），你可以在two.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>

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

2 个答案: