Question

我有一个从发出HTTP GET请求的按钮调用的Javascript。在遇到错误时，它会显示一个带有请求错误的隐藏div，这一切都运行良好。这是脚本：

＆＃13;

$("#callContact1").click(function() {
  console.log('starting event');
  $.ajax({
      url: "<?php echo $eventURL ;?>" + eventID + "<?php echo $eventURL ;?>",
      data: {},
      type: "GET"
    })
    .then(function(data, status, xhr) {
      $('#ajaxResponse1').html(data).show();
      var httpStatus = status;
      var httpResponseCode = (xhr.status);
      console.log('httpStatus: ' + httpStatus);
      console.log('httpResponseCode: ' + httpResponseCode);
    })
    .fail(function(xhr) {
      var httpStatus = (xhr.status);
      var httpResponseCode = (xhr.getAllResponseHeaders);
      var ajaxError = 'There was an requesting the event. HTTP Status: ' + httpStatus;
      console.log('httpStatus: ' + httpStatus);
      console.log('httpResponseCode: ' + httpResponseCode);
      //make alert visible 
      $('#ajaxResponse1').html(ajaxError).show();
    })
})

＆＃13;

我现在需要稍微扩展一下，当它成功时，显示一个带有成功消息的不同隐藏div，例如：

$('#ajaxResponseSuccess1').html('Event Update in Progress').show();

我只是不确定如何扩展这个脚本 - 此时相当新的JS和jQuery。

Answer 1

JQuery AJAX中有一个成功函数：

像这样使用它：

.success(function(response) {
   //DO stuff here.
})

更简单的代码可以是：

        $.ajax({
            url: 'http://example.com',
            method: 'GET',
            success: function (response) {

            },
            error: function (e) {

            }
        });

查看JQuery ajax函数的完整文档 http://api.jquery.com/jquery.ajax/

或

https://www.w3schools.com/jquery/ajax_ajax.asp

Answer 2

您正在使用Ajax调用注册两个回调。您似乎知道fail在出错时执行。这使得.then回调在成功时执行。只需在那里添加呼叫：

.then(function(data, status, xhr) {
  $('#ajaxResponse1').html(data).show();
  $('#ajaxResponseSuccess1').html('Event Update in Progress').show(); // <--
  // ...
})

Answer 3

$.ajax({
      url: "<?php echo $eventURL ;?>" + eventID + "<?php echo $eventURL ;?>",
      data: {},
      type: "GET",
      success : function(data)
      {
        $('#ajaxResponseSuccess1').html('Event Update in Progress').show();
      },
      error:function(xhr,status)
      {
         alert(xhr.statusText);
      }
    });

使用简短形式的ajax：

  $.get("www.xyz.com/abc",{eventId: eventId},callbackFunction);

Javascript AJAX请求 - 检查成功操作

3 个答案: