programming

Làm thế nào để bạn gọi một chức năng thành công trong AJAX?

Ajax là một công nghệ cho phép các nhà phát triển thực hiện các yêu cầu HTTP không đồng bộ mà không cần làm mới toàn bộ trang. Để làm cho quy trình bớt rườm rà hơn so với JavaScript thuần túy, các nhà phát triển đã sử dụng thư viện jQuery trong nhiều năm. Trong bài viết của tôi Giới thiệu về các phương pháp tốc ký Ajax của jQuery, tôi đã thảo luận về một số phương pháp tốc ký Ajax được sử dụng nhiều nhất của jQuery. $.get[], $.post[] và $.load[]. Chúng là những phương pháp thuận tiện để thực hiện các yêu cầu Ajax trong một vài dòng mã

Đôi khi, chúng tôi cần kiểm soát nhiều hơn đối với các lệnh gọi Ajax mà chúng tôi muốn thực hiện. Ví dụ: chúng tôi muốn chỉ định điều gì sẽ xảy ra trong trường hợp lệnh gọi Ajax không thành công hoặc chúng tôi cần thực hiện một yêu cầu Ajax nhưng kết quả của nó chỉ cần thiết nếu được truy xuất trong một khoảng thời gian nhất định. Trong những tình huống như vậy, chúng ta có thể dựa vào một chức năng khác do jQuery cung cấp, được gọi là $.ajax[], đó là chủ đề của hướng dẫn này

Hàm $.ajax[]

Hàm jQuery $.ajax[] được sử dụng để thực hiện yêu cầu HTTP không đồng bộ. Nó đã được thêm vào thư viện từ lâu, tồn tại từ phiên bản 1. 0. Hàm $.ajax[] là cái mà mọi hàm được thảo luận trong bài viết đã đề cập trước đó gọi đằng sau hiện trường bằng cách sử dụng cấu hình đặt trước. Các chữ ký của chức năng này được hiển thị dưới đây

$.ajax[url[, settings]]
$.ajax[[settings]]

Tham số 

$['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $['#main'].load[this.href + ' #main *', function[responseText, status] {
  if [status === 'success'] {
    $['#notification-bar'].text['The page has been successfully loaded'];
  } else {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
1 là một chuỗi chứa URL mà bạn muốn truy cập bằng lệnh gọi Ajax, trong khi đó, 
$['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $['#main'].load[this.href + ' #main *', function[responseText, status] {
  if [status === 'success'] {
    $['#notification-bar'].text['The page has been successfully loaded'];
  } else {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
2 là một đối tượng bằng chữ chứa cấu hình cho yêu cầu Ajax

Ở dạng đầu tiên, hàm này thực hiện một yêu cầu Ajax bằng cách sử dụng tham số 

$['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $['#main'].load[this.href + ' #main *', function[responseText, status] {
  if [status === 'success'] {
    $['#notification-bar'].text['The page has been successfully loaded'];
  } else {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
1 và các tùy chọn được chỉ định trong 
$['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $['#main'].load[this.href + ' #main *', function[responseText, status] {
  if [status === 'success'] {
    $['#notification-bar'].text['The page has been successfully loaded'];
  } else {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
2. Ở dạng thứ hai, URL được chỉ định trong tham số 
$['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $['#main'].load[this.href + ' #main *', function[responseText, status] {
  if [status === 'success'] {
    $['#notification-bar'].text['The page has been successfully loaded'];
  } else {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
2 hoặc có thể được bỏ qua, trong trường hợp đó, yêu cầu được gửi tới trang hiện tại

Danh sách các tùy chọn được chức năng này chấp nhận, được mô tả trong phần tiếp theo, rất dài, vì vậy tôi sẽ giữ mô tả của chúng ngắn gọn. Trong trường hợp bạn muốn nghiên cứu sâu về ý nghĩa của chúng, bạn có thể tham khảo tài liệu chính thức của $.ajax[]

Tham số 
$['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $['#main'].load[this.href + ' #main *', function[responseText, status] {
  if [status === 'success'] {
    $['#notification-bar'].text['The page has been successfully loaded'];
  } else {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
2

Có rất nhiều tùy chọn khác nhau mà bạn có thể chỉ định để điều chỉnh $.ajax[] theo nhu cầu của mình. Trong danh sách dưới đây, bạn có thể tìm thấy tên và mô tả của họ được sắp xếp theo thứ tự bảng chữ cái

  • $['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $['#main'].load[this.href + ' #main *', function[responseText, status] {
  if [status === 'success'] {
    $['#notification-bar'].text['The page has been successfully loaded'];
  } else {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
    9. Loại nội dung được gửi trong tiêu đề yêu cầu cho máy chủ biết loại phản hồi mà nó sẽ chấp nhận để đáp lại
  • $['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $.ajax[this.href, {
    success: function[data] {
      $['#main'].html[$[data].find['#main *']];
      $['#notification-bar'].text['The page has been successfully loaded'];
},
    error: function[] {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
    0. Đặt tùy chọn này thành 
    $['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $.ajax[this.href, {
    success: function[data] {
      $['#main'].html[$[data].find['#main *']];
      $['#notification-bar'].text['The page has been successfully loaded'];
},
    error: function[] {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
    1 để thực hiện yêu cầu đồng bộ
  • $['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $.ajax[this.href, {
    success: function[data] {
      $['#main'].html[$[data].find['#main *']];
      $['#notification-bar'].text['The page has been successfully loaded'];
},
    error: function[] {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
    2. Chức năng gọi lại yêu cầu trước có thể được sử dụng để sửa đổi đối tượng 
    $['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $.ajax[this.href, {
    success: function[data] {
      $['#main'].html[$[data].find['#main *']];
      $['#notification-bar'].text['The page has been successfully loaded'];
},
    error: function[] {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
    3 trước khi nó được gửi đi
  • $['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $.ajax[this.href, {
    success: function[data] {
      $['#main'].html[$[data].find['#main *']];
      $['#notification-bar'].text['The page has been successfully loaded'];
},
    error: function[] {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
    4. Đặt tùy chọn này thành 
    $['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $.ajax[this.href, {
    success: function[data] {
      $['#main'].html[$[data].find['#main *']];
      $['#notification-bar'].text['The page has been successfully loaded'];
},
    error: function[] {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
    1 để buộc các trang được yêu cầu không được trình duyệt lưu vào bộ đệm
  • $['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $.ajax[this.href, {
    success: function[data] {
      $['#main'].html[$[data].find['#main *']];
      $['#notification-bar'].text['The page has been successfully loaded'];
},
    error: function[] {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
    6. Một chức năng được gọi khi yêu cầu kết thúc [sau khi thực thi các cuộc gọi lại 
    $['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $.ajax[this.href, {
    success: function[data] {
      $['#main'].html[$[data].find['#main *']];
      $['#notification-bar'].text['The page has been successfully loaded'];
},
    error: function[] {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
    7 và 
    $['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $.ajax[this.href, {
    success: function[data] {
      $['#main'].html[$[data].find['#main *']];
      $['#notification-bar'].text['The page has been successfully loaded'];
},
    error: function[] {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
    8]
  • $['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $.ajax[this.href, {
    success: function[data] {
      $['#main'].html[$[data].find['#main *']];
      $['#notification-bar'].text['The page has been successfully loaded'];
},
    error: function[] {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
    9. Một đối tượng xác định cách thư viện sẽ phân tích phản hồi
  • $.ajax[{
  url: '//api.joind.in/v2.1/talks/10889',
  data: {
    format: 'json'
  },
  error: function[] {
    $['#info'].html['
    An error has occurred
    '    ];
  },
  dataType: 'jsonp',
  success: function[data] {
    var $title = $['
    '].text[data.talks[0].talk_title];
    var $description =  $['
    '].text[data.talks[0].talk_description];
    $['#info']
    .append[$title]
    .append[$description];
  },
  type: 'GET'
}];
    0. Loại nội dung của dữ liệu được gửi đến máy chủ
  • $.ajax[{
  url: '//api.joind.in/v2.1/talks/10889',
  data: {
    format: 'json'
  },
  error: function[] {
    $['#info'].html['
    An error has occurred
    '    ];
  },
  dataType: 'jsonp',
  success: function[data] {
    var $title = $['
    '].text[data.talks[0].talk_title];
    var $description =  $['
    '].text[data.talks[0].talk_description];
    $['#info']
    .append[$title]
    .append[$description];
  },
  type: 'GET'
}];
    1. Một đối tượng được sử dụng làm ngữ cảnh [
    $.ajax[{
  url: '//api.joind.in/v2.1/talks/10889',
  data: {
    format: 'json'
  },
  error: function[] {
    $['#info'].html['
    An error has occurred
    
  
    

    '    ];
  },
  dataType: 'jsonp',
  success: function[data] {
    var $title = $['
    '].text[data.talks[0].talk_title];
    var $description =  $['
    '].text[data.talks[0].talk_description];
    $['#info']
    .append[$title]
    .append[$description];
  },
  type: 'GET'
}];
    2] của tất cả các lệnh gọi lại liên quan đến Ajax
  • $.ajax[{
  url: '//api.joind.in/v2.1/talks/10889',
  data: {
    format: 'json'
  },
  error: function[] {
    $['#info'].html['
    An error has occurred
    '    ];
  },
  dataType: 'jsonp',
  success: function[data] {
    var $title = $['
    '].text[data.talks[0].talk_title];
    var $description =  $['
    '].text[data.talks[0].talk_description];
    $['#info']
    .append[$title]
    .append[$description];
  },
  type: 'GET'
}];
    3. Một đối tượng chứa bộ chuyển đổi dataType-to-dataType
  • $.ajax[{
  url: '//api.joind.in/v2.1/talks/10889',
  data: {
    format: 'json'
  },
  error: function[] {
    $['#info'].html['
    An error has occurred
    '    ];
  },
  dataType: 'jsonp',
  success: function[data] {
    var $title = $['
    '].text[data.talks[0].talk_title];
    var $description =  $['
    '].text[data.talks[0].talk_description];
    $['#info']
    .append[$title]
    .append[$description];
  },
  type: 'GET'
}];
    4. Đặt thuộc tính này thành 
    $.ajax[{
  url: '//api.joind.in/v2.1/talks/10889',
  data: {
    format: 'json'
  },
  error: function[] {
    $['#info'].html['
    An error has occurred
    '    ];
  },
  dataType: 'jsonp',
  success: function[data] {
    var $title = $['
    '].text[data.talks[0].talk_title];
    var $description =  $['
    '].text[data.talks[0].talk_description];
    $['#info']
    .append[$title]
    .append[$description];
  },
  type: 'GET'
}];
    5 để buộc yêu cầu tên miền chéo [chẳng hạn như JSONP] trên cùng một tên miền
  • $.ajax[{
  url: '//api.joind.in/v2.1/talks/10889',
  data: {
    format: 'json'
  },
  error: function[] {
    $['#info'].html['
    An error has occurred
    '    ];
  },
  dataType: 'jsonp',
  success: function[data] {
    var $title = $['
    '].text[data.talks[0].talk_title];
    var $description =  $['
    '].text[data.talks[0].talk_description];
    $['#info']
    .append[$title]
    .append[$description];
  },
  type: 'GET'
}];
    6. Dữ liệu gửi đến máy chủ khi thực hiện yêu cầu Ajax
  • $.ajax[{
  url: '//api.joind.in/v2.1/talks/10889',
  data: {
    format: 'json'
  },
  error: function[] {
    $['#info'].html['
    An error has occurred
    '    ];
  },
  dataType: 'jsonp',
  success: function[data] {
    var $title = $['
    '].text[data.talks[0].talk_title];
    var $description =  $['
    '].text[data.talks[0].talk_description];
    $['#info']
    .append[$title]
    .append[$description];
  },
  type: 'GET'
}];
    7. Một chức năng được sử dụng để xử lý dữ liệu phản hồi thô của XMLHttpRequest
  • $.ajax[{
  url: '//api.joind.in/v2.1/talks/10889',
  data: {
    format: 'json'
  },
  error: function[] {
    $['#info'].html['
    An error has occurred
    '    ];
  },
  dataType: 'jsonp',
  success: function[data] {
    var $title = $['
    '].text[data.talks[0].talk_title];
    var $description =  $['
    '].text[data.talks[0].talk_description];
    $['#info']
    .append[$title]
    .append[$description];
  },
  type: 'GET'
}];
    8. Loại dữ liệu mong đợi trở lại từ máy chủ
  • $['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $.ajax[this.href, {
    success: function[data] {
      $['#main'].html[$[data].find['#main *']];
      $['#notification-bar'].text['The page has been successfully loaded'];
},
    error: function[] {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
    8. Một chức năng được gọi nếu yêu cầu không thành công
  • $.get[]0. Có kích hoạt trình xử lý sự kiện Ajax toàn cầu cho yêu cầu này hay không
  • $.get[]1. Một đối tượng của các tiêu đề bổ sung để gửi đến máy chủ
  • $.get[]2. Đặt tùy chọn này thành 
    $.ajax[{
  url: '//api.joind.in/v2.1/talks/10889',
  data: {
    format: 'json'
  },
  error: function[] {
    $['#info'].html['
    An error has occurred
    '    ];
  },
  dataType: 'jsonp',
  success: function[data] {
    var $title = $['
    '].text[data.talks[0].talk_title];
    var $description =  $['
    '].text[data.talks[0].talk_description];
    $['#info']
    .append[$title]
    .append[$description];
  },
  type: 'GET'
}];
    5 nếu bạn muốn buộc yêu cầu chỉ thành công nếu phản hồi đã thay đổi kể từ yêu cầu cuối cùng
  • $.get[]4. Đặt tùy chọn này thành 
    $.ajax[{
  url: '//api.joind.in/v2.1/talks/10889',
  data: {
    format: 'json'
  },
  error: function[] {
    $['#info'].html['
    An error has occurred
    '    ];
  },
  dataType: 'jsonp',
  success: function[data] {
    var $title = $['
    '].text[data.talks[0].talk_title];
    var $description =  $['
    '].text[data.talks[0].talk_description];
    $['#info']
    .append[$title]
    .append[$description];
  },
  type: 'GET'
}];
    5 nếu bạn muốn buộc jQuery nhận ra môi trường hiện tại là “cục bộ”
  • $.get[]6. Một chuỗi để ghi đè tên hàm gọi lại trong yêu cầu JSONP
  • $.get[]7. Chỉ định tên hàm gọi lại cho một yêu cầu JSONP
  • $.get[]8. Một chuỗi chỉ định loại kịch câm để ghi đè loại kịch câm XHR
  • $.get[]9. Mật khẩu được sử dụng với XMLHttpRequest để phản hồi yêu cầu xác thực truy cập HTTP
  • $.post[]0. Đặt tùy chọn này thành 
    $['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $.ajax[this.href, {
    success: function[data] {
      $['#main'].html[$[data].find['#main *']];
      $['#notification-bar'].text['The page has been successfully loaded'];
},
    error: function[] {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
    1 nếu bạn không muốn dữ liệu được chuyển vào tùy chọn 
    $.ajax[{
  url: '//api.joind.in/v2.1/talks/10889',
  data: {
    format: 'json'
  },
  error: function[] {
    $['#info'].html['
    An error has occurred
    '    ];
  },
  dataType: 'jsonp',
  success: function[data] {
    var $title = $['
    '].text[data.talks[0].talk_title];
    var $description =  $['
    '].text[data.talks[0].talk_description];
    $['#info']
    .append[$title]
    .append[$description];
  },
  type: 'GET'
}];
    6 [nếu chưa phải là chuỗi] được xử lý và chuyển đổi thành chuỗi truy vấn
  • $.post[]3. Xác định một đối tượng có các thuộc tính bổ sung sẽ được sử dụng trong yêu cầu “script” hoặc “jsonp”
  • $.post[]4. Đặt thuộc tính bộ ký tự trên thẻ tập lệnh được sử dụng trong yêu cầu nhưng chỉ áp dụng khi vận chuyển "tập lệnh" được sử dụng
  • $.post[]5. Một đối tượng gồm các mã số HTTP và các hàm sẽ được gọi khi phản hồi có mã tương ứng
  • $['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $.ajax[this.href, {
    success: function[data] {
      $['#main'].html[$[data].find['#main *']];
      $['#notification-bar'].text['The page has been successfully loaded'];
},
    error: function[] {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
    7. Một chức năng được gọi nếu yêu cầu thành công
  • $.post[]7. Một số chỉ định thời gian chờ [tính bằng mili giây] cho yêu cầu
  • $.post[]8. Đặt giá trị này thành 
    $.ajax[{
  url: '//api.joind.in/v2.1/talks/10889',
  data: {
    format: 'json'
  },
  error: function[] {
    $['#info'].html['
    An error has occurred
    
  
    

    '    ];
  },
  dataType: 'jsonp',
  success: function[data] {
    var $title = $['
    '].text[data.talks[0].talk_title];
    var $description =  $['
    '].text[data.talks[0].talk_description];
    $['#info']
    .append[$title]
    .append[$description];
  },
  type: 'GET'
}];
    5 nếu bạn muốn sử dụng kiểu tuần tự hóa thông số truyền thống
  • $.load[]0. Loại yêu cầu thực hiện, có thể là “POST” hoặc “GET”
  • $['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $['#main'].load[this.href + ' #main *', function[responseText, status] {
  if [status === 'success'] {
    $['#notification-bar'].text['The page has been successfully loaded'];
  } else {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
    1. Một chuỗi chứa URL mà yêu cầu được gửi đến
  • $.load[]2. Tên người dùng được sử dụng với XMLHttpRequest để phản hồi yêu cầu xác thực truy cập HTTP
  • $.load[]3. Gọi lại để tạo đối tượng XMLHttpRequest
  • $.load[]4. Một đối tượng để đặt trên đối tượng XHR gốc

Đó là một danh sách khá dài, phải không? . Phần tiếp theo sẽ thú vị hơn, vì chúng ta sẽ đưa hàm $.ajax[] và một số tùy chọn này vào hoạt động

Để tất cả chúng cùng nhau

Trong phần này, chúng ta sẽ thấy chức năng này và một số tùy chọn của nó đang hoạt động

Ví dụ đầu tiên về $.ajax[]

Chúng ta sẽ bắt đầu với một bản trình diễn đơn giản tái tạo cùng mã mà chúng ta đã phát triển trong bài viết trước, nhưng lần này chúng ta sẽ áp dụng $.ajax[]. Mã tôi đang nói đến được hiển thị bên dưới để thuận tiện cho bạn

$['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $['#main'].load[this.href + ' #main *', function[responseText, status] {
  if [status === 'success'] {
    $['#notification-bar'].text['The page has been successfully loaded'];
  } else {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];

Cập nhật đoạn mã này để sử dụng hàm $.ajax[], chúng tôi nhận được mã hiển thị bên dưới

________số 8_______

Ở đây bạn có thể thấy rằng tôi đã sử dụng dạng đầu tiên của hàm. Tôi đã chỉ định URL để gửi yêu cầu làm tham số đầu tiên và sau đó là đối tượng cài đặt làm tham số thứ hai. Cái sau chỉ tận dụng hai trong số một số thuộc tính được thảo luận trong phần trước - 

$['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $.ajax[this.href, {
    success: function[data] {
      $['#main'].html[$[data].find['#main *']];
      $['#notification-bar'].text['The page has been successfully loaded'];
},
    error: function[] {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
7 và 
$['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $.ajax[this.href, {
    success: function[data] {
      $['#main'].html[$[data].find['#main *']];
      $['#notification-bar'].text['The page has been successfully loaded'];
},
    error: function[] {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
8 - để chỉ định những việc cần làm trong trường hợp thành công hoặc thất bại của yêu cầu tương ứng

Truy xuất một cuộc nói chuyện từ Đã tham gia. trong Sử dụng $.ajax[]

Ví dụ thứ hai tôi muốn thảo luận tạo một yêu cầu JSONP để truy xuất một số thông tin từ một dịch vụ có tên là Tham gia. TRONG. Cái sau là một trang web nơi những người tham dự sự kiện có thể để lại phản hồi về một sự kiện và các phiên của nó. Cụ thể, tôi sẽ tạo một đoạn mã, sử dụng hàm $.ajax[], truy xuất tiêu đề và mô tả bài nói chuyện của tôi Giao diện người dùng hiện đại dưới con mắt của một nhà phát triển PHP

Mã để đạt được mục tiêu này như sau

$.ajax[{
  url: '//api.joind.in/v2.1/talks/10889',
  data: {
    format: 'json'
  },
  error: function[] {
    $['#info'].html['
An error has occurred
'];
  },
  dataType: 'jsonp',
  success: function[data] {
    var $title = $['
'].text[data.talks[0].talk_title];
    var $description =  $['
'].text[data.talks[0].talk_description];
    $['#info']
    .append[$title]
    .append[$description];
  },
  type: 'GET'
}];

Trong đoạn mã trên, tôi đã sử dụng một số thuộc tính được liệt kê ở trên. Trước hết, bạn có thể thấy rằng tôi đang sử dụng dạng thứ hai của $.ajax[], cho phép tôi chỉ định URL mà yêu cầu được gửi tới dưới dạng thuộc tính [

$['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $['#main'].load[this.href + ' #main *', function[responseText, status] {
  if [status === 'success'] {
    $['#notification-bar'].text['The page has been successfully loaded'];
  } else {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
1] của đối tượng theo nghĩa đen. Bởi vì khớp. API của in chấp nhận yêu cầu JSONP, trong đoạn mã trên, tôi đang đặt loại yêu cầu mà tôi muốn sử dụng bằng cách chỉ định thuộc tính 
$.ajax[{
  url: '//api.joind.in/v2.1/talks/10889',
  data: {
    format: 'json'
  },
  error: function[] {
    $['#info'].html['
An error has occurred

  


'];
  },
  dataType: 'jsonp',
  success: function[data] {
    var $title = $['
'].text[data.talks[0].talk_title];
    var $description =  $['
'].text[data.talks[0].talk_description];
    $['#info']
    .append[$title]
    .append[$description];
  },
  type: 'GET'
}];
8. Sau đó, tôi đã sử dụng thuộc tính 
$.ajax[{
  url: '//api.joind.in/v2.1/talks/10889',
  data: {
    format: 'json'
  },
  error: function[] {
    $['#info'].html['
An error has occurred
'];
  },
  dataType: 'jsonp',
  success: function[data] {
    var $title = $['
'].text[data.talks[0].talk_title];
    var $description =  $['
'].text[data.talks[0].talk_description];
    $['#info']
    .append[$title]
    .append[$description];
  },
  type: 'GET'
}];
6 để xác định loại định dạng mà tôi muốn lấy từ máy chủ theo yêu cầu của API. Tuy nhiên, cái sau yêu cầu dữ liệu này như một phần của chuỗi truy vấn của yêu cầu GET, do đó tôi cũng chỉ định cài đặt thuộc tính $.load[]0 $.ajax[]8 làm giá trị của nó. Cuối cùng, tôi đã viết một cuộc gọi lại 
$['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $.ajax[this.href, {
    success: function[data] {
      $['#main'].html[$[data].find['#main *']];
      $['#notification-bar'].text['The page has been successfully loaded'];
},
    error: function[] {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
8 để hiển thị thông báo trong trường hợp có lỗi và một cuộc gọi lại 
$['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $.ajax[this.href, {
    success: function[data] {
      $['#main'].html[$[data].find['#main *']];
      $['#notification-bar'].text['The page has been successfully loaded'];
},
    error: function[] {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
7 để hiển thị tiêu đề và mô tả của bài nói trong trường hợp thành công

Một bản demo trực tiếp của mã này được hiển thị bên dưới

Phần kết luận

Trong hướng dẫn này, tôi đã thảo luận về các hàm Ajax mạnh nhất do jQuery cung cấp, $.ajax[]. Nó cho phép bạn thực hiện các yêu cầu Ajax với nhiều quyền kiểm soát đối với cách gửi yêu cầu đến máy chủ và cách xử lý phản hồi. Nhờ chức năng này, bạn có các công cụ cần thiết để đáp ứng tất cả các yêu cầu của dự án trong trường hợp không có chức năng tốc ký nào phù hợp

Để hiểu rõ hơn về tiềm năng của chức năng này, tôi khuyến khích bạn thử với các mẫu mã và thử sửa đổi mã để sử dụng một số tùy chọn khác được chấp nhận bởi tham số 

$['#main-menu a'].on['click', function[event] {
  event.preventDefault[];

  $['#main'].load[this.href + ' #main *', function[responseText, status] {
  if [status === 'success'] {
    $['#notification-bar'].text['The page has been successfully loaded'];
  } else {
      $['#notification-bar'].text['An error occurred'];
    }
  }];
}];
2

Nếu bạn muốn tìm hiểu thêm về JavaScript, hãy xem các tiêu đề JavaScript của chúng tôi tại SitePoint Premium. Chúc vui vẻ

Chia sẻ bài viết này

Aurelio De Rosa

Tôi là nhà phát triển ứng dụng và web [full-stack] với hơn 5 năm kinh nghiệm lập trình cho web bằng HTML, CSS, Sass, JavaScript và PHP. Tôi là chuyên gia về API JavaScript và HTML5 nhưng sở thích của tôi bao gồm bảo mật web, khả năng truy cập, hiệu suất và SEO. Tôi cũng là người viết thường xuyên cho một số mạng, diễn giả và tác giả của cuốn sách jQuery in Action, ấn bản thứ ba và Bộ chọn jQuery tức thì

    Maria Antonietta Perna

    Maria Antonietta Perna là một giáo viên và nhà văn kỹ thuật. Cô ấy thích mày mò với các tiêu chuẩn CSS thú vị và tò mò về việc dạy các phương pháp tiếp cận mã giao diện người dùng. Khi không viết mã hoặc viết web, cô ấy thích đọc sách triết học, đi bộ đường dài và đánh giá cao những món ăn ngon

    Làm cách nào để gọi một hàm trong AJAX?

    Cách tiếp cận 1. Theo cách tiếp cận này, chúng ta sẽ sử dụng đối tượng XMLHttpRequest để thực hiện lệnh gọi Ajax . Phương thức XMLHttpRequest[] tạo đối tượng XMLHttpRequest được sử dụng để thực hiện yêu cầu với máy chủ. cú pháp. var xhttp = new XMLHttpRequest[];

    Thành công AJAX là gì?

    'Thành công' có nghĩa là Ajax đã thành công . Bạn có thể 'xếp chồng' chúng để xử lý một trong hai tình huống. 'Lỗi' rất hữu ích để họ biết đã xảy ra lỗi. Đây là tất cả các trình xử lý sự kiện hoặc gọi lại sự kiện, diễn ra sau một yêu cầu Ajax.

    Sự kiện nào cũng chỉ được gọi nếu yêu cầu thành công?

    The success[] [Sự kiện cục bộ] chỉ được gọi nếu yêu cầu thành công [không có lỗi từ máy chủ, không có lỗi với . Mặt khác, hoàn thành [] [Sự kiện cục bộ] được gọi bất kể yêu cầu có thành công hay không.

    Làm cách nào để trả về dữ liệu từ chức năng thành công AJAX?

    Bạn có thể lưu trữ lời hứa của mình, bạn có thể chuyển nó đi khắp nơi, bạn có thể sử dụng nó làm đối số trong các lời gọi hàm và bạn có thể trả về nó từ các hàm, nhưng cuối cùng khi bạn muốn sử dụng dữ liệu được AJAX trả về . hứa. success[function [data] { alert[data]; }];

    Bài Viết Liên Quan

    Datetimepicker bootstrap 4 tải xuống
    Cách truy cập mảng đối tượng trong JavaScript
    Kỹ thuật cơ khí với Python
    Làm thế nào để bạn viết hoa chữ cái đầu tiên của mỗi từ trong python?
    Làm cách nào để bạn đọc từng dòng của tệp dưới dạng danh sách trong python?
    C4h11n có bao nhiêu amin bậc 3
    36 từ khóa trong Python
    C++ sang Python
    Tại sao sử dụng nghiêm ngặt được sử dụng trong JavaScript?
    2024 Cộng sự KPSS Khi nào?
    Hàm Def lambda trong Python là gì?
    Cách sử dụng bảng ký hiệu cục bộ trong python?
    Di chuyển phần tử sang phải css
    Bầu bao nhiêu tuần được đi máy bay Vietnam Airline
    Tam giác VPython
    PHP kết hợp JavaScript
    Lịch React-bootstrap
    Mẫu bảng tính theo dõi lô hàng
    2023 Genesis GV70 loại xăng
    Lập trình hướng đối tượng nâng cao python

    Toplist mới

    #1
    Top 7 tết mậu thân năm 1968 đã diễn ra sự kiện gì ở miền nam nước ta 2023
    6 tháng trước
    #2
    Top 13 luyện từ và câu: dấu gạch ngang lớp 4 trang 45 2023
    6 tháng trước
    #3
    Top 6 trong mặt phẳng oxy ảnh của đường thẳng d 3x y 4=0 2023
    6 tháng trước
    #4
    Top 6 thử thách thần chết thuyết minh phần 2 2023
    6 tháng trước
    #5
    Top 4 vở bài tập tiếng việt lớp 3 tập 2 chính tả trang 15 2023
    6 tháng trước
    #6
    Top 5 áo khoác nam quảng châu cao cấp 2023
    6 tháng trước
    #7
    Top 4 nội dung nào sau đây không phải là trách nhiệm của đơn vị đầu mối cung cấp thông tin 2023
    6 tháng trước
    #8
    Top 9 mẫu đồng phục công sở đẹp 2022 2023
    6 tháng trước
    #9
    Top 5 ốp lưng iphone 13 pro bảo vệ camera 2023
    6 tháng trước

    Bài mới nhất

    Cải làm dưa chua là cải gì năm 2024
    Các sản phẩm làm đẹp tiếng anh là gì năm 2024
    Bán hàng phát sinh giảm giá hoạch toán tn năm 2024
    Lá thư trong tiếng anh là gì năm 2024
    Mẫu hợp đồng thanh toán qua bên thứ 3 năm 2024
    Giải sách bài tập tiếng anh lớp 7 trang 8 năm 2024
    1994 sinh con năm 2023 tháng nào tốt năm 2024
    Dịch vụ chuyển văn phòng tại thanh hóa năm 2024
    Font việt hóa không hiển thị giống như demo năm 2024
    Các trường của 1 đối tượng là gì năm 2024

    Chủ Đề

    programming Hỏi Đáp Là gì Mẹo Hay Toplist Địa Điểm Hay Học Tốt mẹo hay Công Nghệ Nghĩa của từ Bao nhiêu Khỏe Đẹp đánh giá Tiếng anh Top List bao nhieu bao nhiêu hướng dẫn Món Ngon So Sánh Bài tập So sánh Xây Đựng Sản phẩm tốt Ngôn ngữ Bài Tập javascript Ở đâu Thế nào Hướng dẫn Dịch Tại sao Máy tính Đại học