Question

这可能吗？如果是这样，我真的可以使用一些帮助。我是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>

我打算将这些功能用于其他事情，所以我想我要创建一个名称空间。我发现 this 作为参考，并基于我的大部分模型。

感谢所有可以提供帮助的人。

Answer 1

你的失败点是什么？您的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请求之前检查并使用files.send(null)

编辑：

有关您的代码的更多评论：

在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值
在file.open(method, path, true);中，path应该是AJAX请求将调用的脚本的URL。您已将path设为../includes/_notes/countries.txt。 AJAX请求无法调用.txt文件，因为它们不会执行。

我刚刚查看了代码的来源，这是各种各样的破解。请不要使用它。

什么是countries.txt？您是否尝试使用所有国家/地区或某些国家/地区的列表填充下拉列表，具体取决于用户的输入？

如果是前者，则不需要Javascript / AJAX。您需要在html中添加PHP代码以填充选择框。

如果是后者，您的AJAX请求应该将用户输入作为GET变量发送。

Answer 2

一些意见：

非常好的代码;它可读，看起来很整洁。
我使用与base不同的名称作为命名空间 - 根据我的喜好，这个词太“普遍”了。您可能会在某处定义变量base并且它将会中断。
要从JavaScript创建HTML，首先在纯HTML中创建一个小示例，以查看它应该是什么样子。之后，创建一个使用document.createElement()生成相同HTML的脚本。
查看jQuery或Prototype等框架，因为它们使许多无聊的任务变得更加简单。

从文本文件中创建javascript中的下拉列表

2 个答案: