Question

所以我是一个全新的JS新手。我已经阅读了其他一百篇帖子，尝试过他们的解决方案，而我似乎无法将其付诸实践以挽救我的生命。

问题在于：

我有JS和ajax工作。但仅限于明确表达的价值观。我试图抽象它来处理它停止工作的所有变量。

我也愿意采取更好的方式来做到这一点，但这是我迄今为止根据我的有限知识所想到的。

我有一个非常大的形式。近400个字段用于手机上的“现场”数据采集。带宽不是问题，但稳定性和可靠性是，所以表格应该在输入时发送每个数据，允许更改和更改，直到它准备好提交。在此之前它会发回相同的信息，然后用于显示绿点以验证数据实际上已存储。因此，对于每个表单字段，都有一个<span>，其形式以FormFieldAStatus的形式命名。我把它包括在下面。

表格摘要：

<input type="text" class="form-textbox validate[required]" id="input_1" name="formFieldA" size="20" onchange="saveData(); readData()" />
<span class="ajax-success" id="formFieldAStatus"></span>

以下是有效的代码：

function readData() {
  new Ajax.Request('AjaxRead.php', {
    method: 'post',
    parameters: $('Worksheet').serialize(true),
    onSuccess: function(transport) {
      var icon = '<img src="images/greendot.png" align="bottom" style="margin-right:5px;">';
      if (transport.responseText) {
        var json=transport.responseText.evalJSON();
        if(json.formFieldA) { 
          var status = $('formFieldAStatus'); 
          status.update(icon); } 
        if(json.formFieldB) { 
          var status = $('formFieldBStatus'); 
          status.update(icon); } 
        if(json.formFieldC) { 
          var status = $('formFieldCStatus'); 
          status.update(icon); } 
      }
    },
    onFailure:function(){ alert('Something went wrong...') }
  });
}

严重。我没有把400条线路用于检查每个区域。那太疯狂了。

这是应该有效的代码，但不是。

function readData() {
  new Ajax.Request('AjaxRead.php', {
    method: 'post',
    parameters: $('Worksheet').serialize(true),
    onSuccess: function(transport) {
      var icon = '<img src="images/greendot.png" align="bottom" style="margin-right:5px;">';
      if (transport.responseText) {
        var json=transport.responseText.evalJSON();
        for(var key in json) {
          if(!json[key]=='') {
            var statusName=key+'Status';

// Take your pick of the following. I've tried them all.                

            var status = $(statusName);
            var status = $(window[statusName]);
            var status = $(key+'Status');
            var status = $(window[key+'Status']);
            eval("var status = $('"+key+"Status');");

// Did any of them work ever?

            status.update(icon); }
        }
      }
    },
    onFailure:function(){ alert('Something went wrong...') }
  });
}

非常感谢任何帮助。如果有更好的方法可以做到这一点，那么我全都听见了。

干杯。

最新详情：

我补充说：

console.log('statusname: '+statusName);
console.log('status: '+status);
console.log('status Object: '+Object.inspect(status));

它吐了出来：

statusname: fieldNameAStatus 
status: [object HTMLElement] 
status Object: <span id="fieldNameAStatus" class="ajax-success">

对于我尝试的每种方法......

我取消注释的那一刻：

status.update(icon);

我得到了这个：

statusname: formIDStatus 
status: null 
status Object: null

这很奇怪，对吧？

确定。所以现在我把console.log的东西放下了，（个人一边，然后就是为了教育我这个问题），我决定看一下当我为每个字段使用工作手动指定的代码时它显示的内容。

status: [object HTMLElement]
status Object: <span id="fieldNameAStatus" class="ajax-success">

以下是我们所拥有的：

工作代码：读取键，创建状态对象，这是一个定义<span>它应该的html字符串，并且没有任何问题进行更新。

非工作：读取键，创建状态对象，这是一个定义<span>的html字符串，但更新对象的调用会在循环的第一次迭代中将其杀死。

现在怎么办？

Answer 1

尝试：

var statusName=json[key]+'Status';

看起来你只是抓住密钥并试图使用它而不是价值。还要确保在使用“for in”时执行json.hasOwnProperty（key）。如果您console.log(!json[key]=='')之后输出是什么？

Answer 2

var statusName = json[key] + 'Status';

Answer 3

确定。有用。我想到了。事实证明，当表单上的一个字段被传递时，它正在消亡，但没有span它可以放任何东西。碰巧它遇到的第一个就是形式本身。我并不特别需要表单名称，但是如果它不存在则表单中包含JS功能。我无法得到我的if语句，看看该字段是否为空而忽略它，所以它保持不变。没什么大不了的。

我无法通过console.log中的线索解决这个问题。保存了我的培根。

再次感谢。这是最终的代码：

function readData() {
  new Ajax.Request('AjaxRead.php', {
    method: 'post',
    parameters: $('Worksheet').serialize(true),
    onSuccess: function(transport) {
      var icon = '<img src="images/success.png" align="bottom" style="margin-right:5px;">';
      var noicon = '';
      if (transport.responseText) {
        var json=transport.responseText.evalJSON();
        for(var key in json) {
          var statusName=key+'Status';
          var status = $(statusName); 
          if(!json[key]=='') {
            status.update(icon); }
          else {
            status.update(noicon); }
        }
      }
    },
    onFailure:function(){ alert('Something went wrong...') }
  });
}

这是要更新的HTML;

<span class="ajax-success" id="fieldNameAStatus"></span>

干杯

Javascript和动态变量......再次

3 个答案: