Ваш вопрос немного неясен, однако - я постараюсь угадать, что вы говорите, охватить все случаи и дать небольшую добавленную стоимость;)
Я предполагаю, что у вас есть серверная сторонастрока на странице JSP, чье значение равно
5: "White", 6: "Yellow", 7: "Pink"
Как это выглядит
<%
String data = "5: \"White\", 6: \"Yellow\", 7: \"Pink\"";
%>
А теперь вы хотите записать ее в документ, чтобы вы могли forпозже в коде на стороне клиента.
В этом смысле - нужно различать несколько случаев.
Хотя когда сервер записывает его в ответный документ, это строка - клиентский код может получить это значение по-разному.Во всех из них - сервер должен записывать данные особым образом, чтобы клиент мог получить к ним доступ, однако правила действительности различны.
Запись литерала объекта
На самом деле - я думаю, это то, что вы пытаетесь сделать.Код клиента получает его не как строку, а как литерал объекта.
<script>
var sObjData = {<%= safeJs(data) %>};
</script>
Ограничения этого выбора заключаются в том, что все, что исходит из кода сервера (в пределах <%%>), и все, что исходит отразметка (за пределами <%%>) должна работать вместе как действительный литерал объекта JavaScript.Есть много вещей, которые могут нарушить законность этого литерала объекта - например, разбитые строки, пропущенные запятые, пропущенные двоеточия и т.Хотя это рекомендуемый способ - вам нужно знать, что вы делаете, и я советую вам углубить эти знания, и ваш пример - хорошее начало.
В вашем примере - это делает действительнымJavaScript Object-Literal, и проблема не в этом.
<script>
var sObjData = {5: "White", 6: "Yellow", 7: "Pink"};
</script>
Это совершенно допустимый объектный литерал, который можно использовать в for - так же, как вы.
ItВозможно, ваш пример упрощает ваш случай, а используемые вами строки могут нарушить ваше выполнение.Вот как обрабатывать строки с сервера на клиентский код:
Запись строки JavaString
Ограничения в этом случае - это то, что любой символ в строке data, которыйможет нарушить JavaSctipt strinbngs - необходимо экранировать для javascript .
Однако здесь я просто рассматриваю все значение data - имейте в виду, что вы можете сделать то же самое для всех значенийчто вы помещаете внутрь этого data.
Вот самая простая реализация, которая объясняет, что нужно экранировать строку Java для JavaScript:
<%!
String safeJs(String data){
return data.replace("\"","\\\"") //why three? two emit a sigle \ and the third escape the "
.replace("'","\\'")
.replace("\n","\\n") //why two? you're not escaping n, your're emitting \ and n
.replace("\r","\\r"); // that will render as escaping for the client code
}
%>
<script>
var sObjData = '<%= safeJs(data) %>';
<script>
Эта часть гарантирует, что вы получите все данные изсервер клиенту, и что он будет доступен клиенту.Отсюда - это ваш собственный протокол доставки данных и их синтаксического анализа на клиенте.
Однако это не всегда рекомендуется: если все, что вы предоставляете, можно сформулировать как Object Literal - этонамного лучше - потому что Браузер обрабатывает для вас анализ в скомпилированном коде и дает коду сценариев готовый объект.
Если вы не хотите анализировать свой собственный строковый протокол, по-видимому - он получает то же самоерезультат к следующему, так зачем?лучше safeJs ваши значения.
<script>
var sObjData = '<%= safeJs(data) %>';
var oObjData = eval("{" + oObjData + "}");
<script>
Записать строку в содержимое TextArea
Это самый надежный способ передачи строк между сервером иклиент HTML - потому что единственное, что может сломаться - это если строка данных содержит закрывающий тег TextArea.
Текстовая область невосприимчива к переносам строк, она не зависит от кавычек (одинарных и двойных), единственная слабость - это собственный закрывающий тег.
Обратите внимание, что замена "" на"
Присвоение идентификатора текстовой области и помещение его в style="display:none" гарантирует, что он не будет беспокоить пользовательский интерфейс и будет доступен.
<textarea style="display:none" id="txtData"><%=data.replace("</","</")%></textarea>
<script>
var s = document.getElementById("txtData");
</script>
опций построения в Select
Уловки DHTML в createElement работают, однако я редко использую его, потому что он громоздок и очень низок по производительности,Однако - если вам удалось правильно написать свой Object Literal - он должен работать.
вставка HTML
Вместо того, чтобы создавать выборку и пытаться ее заполнить - быстрее и надежнее полностью внедрить ее в DOM.
Для этого я использую следующую утилиту:
function getStringBuffer(){
var bfr = [];
bfr.add = function() {
for(var i=0;i<arguments.length;i++) {
this[this.length] = arguments[i];
}
}
bfr.toString = function() { return this.join("") }
return bfr;
}
Обтекание в (function(){ и })() создает анонимную функцию и выполняет ее мгновенно - это гарантирует, что никакие переменные, объявленные для этой работы, не будут загрязнять глобальную область действия.
первый способ - использование document.write:
<script>
(function(){
var HTML = getStringBuffer();
var k;
HTML.add("<select id='selectObj'>");
for (k in myOpts) {
HTML.add("<option value='", k, "'>", myOpts[k],"</option>");
}
HTML[HTML.length] = "</select>";
document.write(HTML); //note the overriden toString method that will be called here
})();
</script>
Второй способ - использование innerHTML
Вы можете сделать то же самое, и вместо этого document.write - использовать тег контейнера, чтобы отметить место выбора, и вставить его туда даже после завершения загрузки DOM.
это то же самое, что и первый способ, с одним отличием: вместо document.write(HTML); -
поместите контейнер, скажем <span id="oSelectPlace"></span>, где вы хотите, чтобы выбор был, и затем используйте
document.getElementById("oSelectPlace").innerHTML = HMTL;