如何使用ajax動態加載選擇選項值

Question

我是ajax的新手。 選中復選框后，我希望我的選擇組合框字段由ajax動態加載。 我想要的是當我單擊復選框ajax時應從two.jsp文件中獲取數據並在one.jsp選擇框中填充該數據

一個.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

由於您試圖將selects innerHTML設置為responseText，因此您試圖“粘貼”描述select內描述two.jsp頁面的整個文本。

除了強烈不同意您使用html文檔傳輸選項數據而不是xml或json之外，您還可以選擇以下兩種方式：

1）將two.jsp頁面解析為一個實時html文檔，並使用選擇器將您選擇的innerHTML設置為two.jsp文檔中主體的innerHTML。

要么

2）將responseText中的字符串切成小段，以便只剩下選項，然后使用該字符串設置選擇的innerhtml。

Answer 2

那不是正確的方法。 您需要更改two.jsp以返回數據（XML或JSON）而不是HTML頁面。 然后，您的AJAX將獲取數據並遍歷數據以創建選項並將其添加到控件中。

另外，如果您確實希望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 個解決方案

解決方案1
0 2015-09-17 13:50:45

解決方案2
0 2015-09-17 13:51:01

如何使用ajax動態加載選擇選項值

問題描述

2 個解決方案

解決方案1 0 2015-09-17 13:50:45

解決方案2 0 2015-09-17 13:51:01

解決方案1
0 2015-09-17 13:50:45

解決方案2
0 2015-09-17 13:51:01