как обновить div с помощью jquery на основе выпадающего списка

Question

У меня есть выпадающее меню с 3 значениями.у каждого есть option идентификатор.Я хочу сделать ajax-запрос и обновить div на основе ответа от этого запроса.

У меня есть пример кода на jsbin, в котором я пытаюсь сделать ajax-запрос к imdb.Я не хочу анализировать ответ обратно из imdb, но хочу, чтобы кто-то показал мне, как обновить div на основе ответа обратно из imdb.Это всего лишь пример, так как я пытаюсь реализовать что-то подобное в моем приложении ... единственное отличие состоит в том, что вместо обратного вызова к imdb я буду выполнять обратный вызов для моего приложения.

Пожалуйста, посмотрите пример

Answer 1

Что-то вроде:

$('select').change(function() {
    $('#yourdiv').load('to/your/page', {value: $(this).val()});
});

Это будет отправлять запрос GET (to/your/page?value=theSelectValue) всякий раз, когда изменяется значение элемента select, и загружать ответ в div с идентификатором yourdiv.

Конечно, вам нужно настроить селекторы и имя параметра.

Если вы хотите сделать запрос POST, вы можете использовать функцию $.post() с обратным вызовом:

$('select').change(function() {
    $.post('to/your/page', {value: $(this).val()}, function(data) {
        $('#yourdiv').html(data);
    });
});

Ссылка: .change(), .val(), .load(), $.post()

Answer 2

Прежде всего, вы захотите изучить http://code.google.com/p/imdb-api/ или другую реализацию API для доступа к информации IMDB. Это лучший подход по сравнению с поиском страницы в IMDB и анализом результата html.

Вот как вы можете выбрать и сделать запрос к вашему серверу, чтобы использовать IMDB API для просмотра информации о фильме:

 <script>
$(document).ready(function(){
  $("#drop-down").change(function(){
    $.ajax({
      type: "POST",
      url: "serverCodeToGetIMDBLookup.php",
      data: "movie="+$("#drop-down").val(),
      success: function(msg){
         //process return msg here with movie information 
      }
    });
  });  
 });
</script>

Чтобы просто получить страницу IMDB:

$("#drop-down").change(function(){    
  $('#result').load('someIMDBPage.html', function() {
     alert('Load was performed.');
  });
});

Answer 3

Пользователь jquery нагрузка

например,

$("#drop-down").change(function(){
  $('#result').load('http://www.imdb.com/title/' + this.id + '/');
}); 

Answer 4

Почему бы вам не использовать метод .ajax из jQuery? Вот пример:

$.ajax({
        type: "POST",
        url: "YOUR_URL",
        data: { query: $('input#query').val() }, //this is example only
        ontentType: "application/json; charset=utf-8",
        dataType: "json", //you can change to html
        success: function(result) { $('#div_id').html(result)},
        error: function(xhr, ajaxOptions, throwError) {
            alert(throwError);
        }
    });