AJAX在请求之前和之后添加效果

Question

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

1. 点击按钮，点击show loading image gif
2. 如果成功，它将显示列表视图

3. 如果失败，它将在您当前的城市显示无工作

   <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);
   }
   

请帮助