Javascript AJAX在请求前后添加效果

我试图实现的是，当我的用户按下一个按钮时，它会根据城市请求作业。我通过复制一些脚本成功地做到了这一点。 现在我正在尝试应用一些效果

在按钮上单击显示加载图像gif

如果成功，它将显示一个列表视图

如果失败，它将显示在您当前的城市没有工作

<script>
        // Set City variable
        var city ="Amsterdam";
        //on document ready
        $(document).ready(function(){
       //On button with the id getjob clicked
            $("#getJob").click(function(){
                //Ajax request and on success call listjob function
                $.ajax({url:"http://domain.org/job.php?city="+city,
                        success:function(result){
                            var myArr = JSON.parse(result);
                            listJob(myArr);
                        }});    
            });
        });
 function listJob(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<li><a href="#jobOne"><i mg src="http://domain.org/img/' + arr[i].image +'"></a><h2>Employer:' +
        arr[i].employer + '</h2><h3>Position: '+  arr[i].jobtitle +'</h3><p>Job Description :' + arr[i].jobdescription + '</p><p>Salary: ' + arr[i].salary  +'</p></li>';
    }
    $("#jobListing").html(out);
}

//设置城市变量
var city=“阿姆斯特丹”；
//文件准备就绪
$（文档）.ready（函数（）{
//单击id为getjob的按钮
$（“#getJob”）。单击（函数（）{
//Ajax请求和成功调用listjob函数
$.ajax（{url:http://domain.org/job.php?city=“+城市，
成功：功能（结果）{
var myArr=JSON.parse（结果）；
listJob（myArr）；
}});    
});
});
函数列表作业（arr）{
var out=“”；
var i；
对于（i=0；i薪水：'+arr[i].薪水+'
'；
}
$（“#工作清单”）.html（输出）；
}

---

请帮助

在发送之前，您是否查看了

和
完成的AJAX调用功能？请参阅我自己的问题和答案：以获取可能有用的信息。正如@Scott所说，你应该使用beforeSend和complete函数回调来实现你想要的。我甚至不完全理解全部代码。你有没有研究过AJAX调用的
beforeSend:
和
complete:
函数？请参阅我自己的问题和答案：获取可能有用的信息。正如@Scott所说，你应该使用beforeSend和complete函数回调来实现你想要的。我甚至不完全理解整个代码哈哈哈