Ajax请求后变量未定义

Question

我有一个全局定义的JavaScript函数，它执行ajax请求以从模型中获取一些数据。我遇到的问题是，当我加载页面并检查元素时，它会给出错误：

  

未捕获的ReferenceError：未定义响应

这是功能：

function getRating(work_id)
        {
            $.ajax({
                url: '/read/getRatings',
                type: 'GET',
                async: true,
                data: { field1: work_id},
                success: function (data) {
                    //your success code
                   response = data;
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("Error: " + thrownError);
                }
            });
            return response;
        }

在我的HTML中调用该函数，如下所示：

  <div class="extra">
    <script>
    document.write(getRating(112));
    </script>
  </div>

浏览器控制台错误]：

Ajax请求工作正常，因为当我在Chrome的开发人员工具中检查它时，正确的响应会回来。但是，变量response未在$.ajax()方法中初始化。

当我尝试在函数的开头添加$response = "";以便明确定义它时，它总是返回空字符串，并且变量不会在ajax请求中发生变化。

任何人都知道这里出了什么问题？

Answer 1

这是对异步编程的常见误解。初始呼叫结束时您没有返回结果 - 您需要回调为您写作（success部分）。

function getRating(work_id, selectorToWriteTo)
        {
            $.ajax({
                url: '/read/getRatings',
                type: 'GET',
                async: true,
                data: { field1: work_id},
                success: function (data) {
                    //your success code
                    $(selectorToWriteTo).html(data);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("Error: " + thrownError);
                }
            });
        }

HTML：

<div class="extra" id="myDiv">
    <script>
         getRating(112, '#myDiv')
    </script>
  </div>