создание выпадающего списка в JavaScript из текстового файла - PullRequest
Новая
       0

создание выпадающего списка в JavaScript из текстового файла

3 голосов
/ 16 ноября 2011

Возможно ли это?Если так, я мог бы действительно помочь с этим.Я очень плохо знаком с JavaScript и, следовательно, вряд ли знаю ни синтаксические спецификации, ни правильную методологию.

Некоторые функции, которые я написал во внешнем файле. 

var base = base || {};

base.requestAjax = function () {

    try{

        return new XMLHttpRequest();

    } catch (e) {

        try {

            return new ActiveXObject("Msxml2.XMLHTTP");

        } catch (e) {

            try {

                return new ActiveXObject("Microsoft.XMLHTTP");

            } catch (e) {

                alert("Something is wrong with your browser! Please ensure that you have javascript functionality enabled");
                return false;
            }
        }
      }
}

base.onReadyStateChange = function(ajaxRequest, formName, formArray, method, controller) {

    var methodVerified = verifyMethod(method);

    if (!methodVerified) {
        throw new Exception("Error: please make sure the method passed matches that of \'GET\' or \'POST\'.");
    } 

    for (input in formArray) {
        document.formName.input.value = ajaxRequest.responseText;
    }

    ajaxRequest.open(method, controller, true);
    file.send(null);
}


base.writeDropDownList = function(file, method, path) {

    var file = upload.requestAjax();

    file.open(method, path, true);

    if (file.readyState != 4) {
        throw new Exception("Error: text file ready state not equal to 4!");
    }

    if (file.status != 200) {
        throw new Exception("Error: text file status not equal to 200!");
    }

    var lines = file.responseText.split("\n");

    document.writeln("<select>");

        for(line in lines) {
        document.writeln("<option>" + line + "</option>");
    }

    document.writeln("</select>");

    file.send(null);    
}

base.verifyMethod = function(method) {

    var methodLower = method.toString().toLowerCase();

    switch(methodLower) {
        case "get":
        case "post":
            return true;

        default:
            return false;
    }
}

HTML-код, который пытается его реализовать 

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="../includes/css/adsmanager.css" />
        <script type="text/javascript" src="../includes/js/base.js">
        <!--
        function createCountriesList() {
            var file = base.requestAjax;
            var path = "../includes/_notes/countries.txt";
            base.writeDropDownList(file, "GET", path);
        }
        //-->
        </script>
    </head>
    <body>

        <form name='adsManager'>
            <button type="text" value="test" onclick="createCountriesList()" />
        </form>

    </body>
</html>

Я планирую использовать функции для других целей, поэтому я решил создать пространство имен.Я нашел этот в качестве справочного материала и основал большую часть моей модели на нем.

Спасибо всем, кто может помочь.

Ответы [ 2 ]

3 голосов
/ 16 ноября 2011

Какова ваша точка отказа?Ваш Javascript отправляет запрос Ajax и получает ответ?

Получает ли lines данные в этой строке вашего кода? 

 var lines = file.responseText.split("\n");

Если вы получаете это далеко, выполните итерацию по lines и добавьте следующие параметры: 

var select = document.getElementById('id');
select.options.add(new Option(lines[i]));

В вашем методе writeDropDownList я внес несколько изменений: добавил метод, который будет вызываться после завершения вашего вызова Ajax.В этом методе вы должны проверить строку ответа и добавить опции в поле выбора 

base.writeDropDownList = function(file, method, path) {

    var file = upload.requestAjax();    
    file.open(method, path, true);    
    file.onreadystatechange = requestComplete;
    file.send(null);    
}
  requestComplete()
  {
    if (file.readyState == 4) 
    {
       if(file.readyState == 200)
       {
           var lines = file.responseText.split("\n");
           //foreach loop to populate select
       }
   }                            
 }

. В своем коде вы проверяете и используете files.responseText еще до того, как отправили запрос Ajax на * 1016.*

РЕДАКТИРОВАТЬ:

Еще несколько комментариев относительно вашего кода:

  • В функции createCountriesList вы создаете file и назначаете емузначение по телефону requestAjax.Затем вы передаете его в функцию writeDropDownList, где вы снова присваиваете ему значение, вызывая requestAjax.Вы видите, что это избыточно?Нет необходимости создавать file в createCountriesList и передавать его в качестве аргумента.Создайте его всего один раз в writeDropDownList.

  • в writeDropDownList, который вы называете upload.requestAjax().Что такое
    upload.Я не вижу, чтобы вы инициализировали upload в любом месте.Вы хотите вызвать base.requestAjax()?

  • , у вас есть функция base.OnReadyStateChange, но вы ни разу не говорите своему AJAX-запросу вызвать эту функцию при изменении состояния.Смотрите код, который я разместил выше.Функция, которую я добавил, называется
    requestComplete, делает это, и я сообщаю AJAX-запросу вызвать ее, используя file.onreadystatechange = requestComplete;

  • Вы установили method в GET, но покавы не передаете значения GET в своем URL

  • в file.open(method, path, true);, путь должен быть URL-адресом скрипта, который вызовет AJAX-запрос.Вы установили path на ../includes/_notes/countries.txt.AJAX-запрос не может вызвать файл .txt, так как он не выполняется.

Я только что посмотрел на исходный код вашего кода, и он разбит.Пожалуйста, не используйте его.

Что такое countries.txt?Вы пытаетесь заполнить раскрывающийся список со списком всех стран или некоторых стран в зависимости от ввода пользователя?

Если первое, нет необходимости в Javascript / AJAX.Вам нужно добавить код PHP в html, чтобы заполнить поле выбора.

Если последнее, ваш запрос AJAX должен отправлять пользовательский ввод как переменную GET.

1 голос
/ 16 ноября 2011

Некоторые комментарии:

  1. Очень хороший код; это читается и выглядит аккуратно.
  2. Я бы использовал имя, отличное от base, в качестве пространства имен - на мой взгляд, слово слишком "общее". Скорее всего, вы собираетесь где-то определить переменную base, и она сломается.
  3. Чтобы создать HTML из JavaScript, сначала создайте небольшой пример в чистом HTML, чтобы увидеть, как он должен выглядеть. После этого создайте скрипт, который выдает тот же HTML, используя document.createElement().
  4. Посмотрите на фреймворки, такие как jQuery или Prototype , потому что они делают многие скучные задачи намного проще.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...