jQuery ajax发布返回数据，未捕获ReferenceError:未定义数据 [英] Jquery ajax post return data , Uncaught ReferenceError: data is not defined

问题描述

我有一个脚本，它从div容器(称为protectivepanel)中获取输入文本字段. 我正在做一个ajax post调用，以在后端检查此文本字段. 如果有人输入正确的密码，那么我们将取消隐藏另一个div容器面板.

I have a script that grabs the input text field from a div container called the protectivepanel. I am doing an ajax post call for this text field to be checked in the backend. If a person enters the correct password then we unhide another div container panel.

<script type="text/javascript">

$("#protectivepanel").submit(function(event) {

  $.ajax({
        type: "POST",
        url: "/users/trial_signup_validation",
        data: $("#protectivepanel").serialize(),
        success: function(data){
          console.log('data request succeeded'); 
          return data
        } 
    }); 
  event.preventDefault()
});


$(document).ready(function(){
    $("#the_submit_button").click(function(event){ 
      event.preventDefault();
      console.log('event.preventDefault');
        if (data.success){
          console.log('data'); 
          $("#protectivepanel").hide() 
          $("#salespanel > div").removeClass("hide")
        }
        else {
          $("#protectivepanel").show()
        }   
    });
  });
</script>

这是要检查的方法

  def trial_signup_validation
    @password = params['password']
    if @password == 'sales'
      render :json => { "success" => "true" }
    else 
      render :json => { "success" => "false" }
    end
  end 

现在，我希望它返回json数据，如果成功，那么我们取消隐藏脚本中的面板.

Now I want the it to returned the json data and if its a success then we unhide the panel in the script.

当我在文本框中输入"sales"并点击提交"时，我的chrome控制台就会显示此信息

my chrome console has this when I enter 'sales' in my text box and hit submit

Uncaught ReferenceError: data is not defined 

这是我需要的表格

<div class="container" id="protectivepanel">
  <form role="form">
    <div class="form-group">
      <label for="representativepassword">Representative's Password</label>
      <input type="text" class="form-control" id="representativepassword" placeholder=" Enter Password">
      <button type="submit" class="btn btn-default" id="the_submit_button">Submit</button>
    </div>
  </form>
</div>

我不知道我是否正确地执行了回调.我的服务器日志未显示ajax发布调用.我怎么知道我得到了正确的返回数据?

I don't understand if I am doing the callback correctly. My server log isn't showing the ajax post call. How do I know that I am getting the correct returned data ?

推荐答案

#the_submit_button的click事件中的e.preventDefault阻止提交实际上进行ajax调用的表单.由于submit事件绑定在document.ready之外，因此也可能没有任何绑定.

The e.preventDefault in #the_submit_button's click event prevents the submission of the form which actually makes the ajax call. Since the submit event is bound outside of document.ready, it is possible that nothing is bound either.

最后，您无法从ajax回调中返回.任何依赖于回调结果的操作都必须在回调范围内完成.解决这三件事:

Finally, you cannot return from the ajax callback. Anything that relies on the result of the callback has to be done within the scope of the callback. Fix these three things:

1. 不要preventDefault提交按钮单击事件
2. 绑定到#protectivepanel时，请确保它存在.
3. 将hide/removeClass功能移动到success回调函数中.您可能还想提供一个error回调.

1. Do not preventDefault for the submit button click event
2. Make sure that #protectivepanel exists when you bind to it.
3. Move the hide/removeClass functionality into your success callback function. You may also want to provide an error callback.

这篇关于jQuery ajax发布返回数据，未捕获ReferenceError:未定义数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！