时间戳

首页 > 解决方案 > Ajax Get 返回未定义

javascript - Ajax Get 返回未定义

问题描述

我是一个完全的 Rails 初学者，我对如何修复这个错误非常迷茫。我正在尝试调用我的 javascript 文件get_info_from_iclass中的方法。rentals_controller

$('document').ready(function () {

var iclass_field = document.getElementById("ic").getElementsByTagName("input")[0];
console.log(iclass_field == null);
let timeout;
iclass_field.addEventListener("input", () => {
clearTimeout(timeout);
 timeout = setTimeout(() => populateFields(iclass_field), 500);
  });

    function populateFields(iclass) {
      var temp = iclass.value;
      var studIC = parseInt(temp);
      $.ajax({
        type: "GET",
        url: "rentals/get_info_from_iclass",
        data: {studIC: studIC},
        dataType: 'text',
        async: false,
        success: function(data) {
          document.getElementById("fn").getElementsByTagName("input")[0].value = data.first_name;
          document.getElementById("ln").getElementsByTagName("input")[0].value = data.last_name;
          document.getElementById("em").getElementsByTagName("input")[0].value = data.email_address;
        },
            error: function(data) {
                alert("Fail");
            }
      });
  }
});

最终，我试图用我iclass在控制器中使用的数据库查询返回的数据填充表单中的其他字段。下面是我试图调用的控制器中的方法。

def get_info_from_iclass
   return User.where(iclass: params[:iclass]).last
  end

但是，无论我尝试什么，请求都会返回未定义。通过搜索其他stackoverflow主题，我认为这可能与AJAX是异步的事实有关，我必须对回调方法做一些事情（？？？）。同样，我对此很陌生，如果我提供的信息量可能的话，我希望能深入解释发生的事情。

编辑

我尝试使用回调函数，但是我遇到了同样的问题，我的数据未定义。

  success: update_form,
  error: function(data) {
      alert("Fail");
    }
  });
function update_form(data){
document.getElementById("fn").getElementsByTagName("input")[0].value = data.first;
..etc....

这可能是我查询数据库的方式吗？或者我处理数据类型的方式？

标签： javascriptjqueryhtmlruby-on-rails

解决方案

你有不止一个错误：

  • iclass_field.addEventListener("keypress", ignoreReturn(iclass_field));

    通过这种方式，您立即调用该函数，并且因为该函数返回 undefined 该处理程序将永远不会被调用。但是您再次在函数中添加了处理程序。

  • 如果（键 = 13）{

    通过这种方式，您分配值 13 而不是测试值本身

  • 因为您对\n不感兴趣，您可以使用输入事件简化代码。

  • 将参数传递给jQuery get函数的正确方法是{studIC: studIC}

此外，如果您有一个表单并且不想提交表单本身，您可以使用 submit事件阻止它。

$('document').ready(function () {

    var iclass_field = document.getElementById("ic").getElementsByTagName("input")[0];
    iclass_field.addEventListener("input", function (e) {
        populateFields(iclass_field); // you may use the this keyword.....
    });


    function populateFields(iclass) {
        var temp = iclass.value;
        var studIC = parseInt(temp);
        $.get("rentals/get_info_from_iclass", {studIC: studIC}, function (data) {
            alert('Success');
        });
    }
});

推荐阅读