Ajax. Загрузка данных json через функцию $ .ajax() на основе Element ID

Question

Прежде всего это назначение класса. поэтому я должен идти по этому пути. Мне нужно использовать функцию $ .ajax() для обработки результатов из файла php, а затем загрузить его в «div результатов». То, что я пытаюсь сделать, также - захватить идентификатор щелкнутого элемента с помощью Ajax, затем отправить его в файл php и оттуда создать переменную с идентификатором элемента, а затем использовать случай переключения PHP для загрузки другого сообщения на основе элемента, который был нажат.

Я могу получить эхо с результатами json.

Вот мой HTML:

<a href="#" id="btn1" value="btn1">Button 1</a> 
<a href="#" id="btn2" value="btn2">Button 2</a> 

<div id="results"></div> 

Вот мой JQuery:

$('#btn1').click(function() { 
    $.post("process.php", { id: $(this).attr('id') }, function(response) { 
    alert(response); 
    }); 
}); 
$('#btn2').click(function() { 
    $.post("process.php", { id: $(this).attr('id') }, function(response) { 
    alert(response); 
    }); 
}); 

Вот мой PHP:

if (isset($_POST['id'])) { 
    $id = $_POST['id']; 
} 

switch($id) { 
    case "btn1": 
    $message = "btn1 was clicked"; 
    break; 
    case "btn2": 
    $message = "btn2 was clicked"; 
    break; 
} 


$json = '{ 
    "result":"true", 
    "message":"' . $message . '" 
}'; 

echo $json; 

Опять что отзовется ответ JSon.

Кнопка 1 щелчок:

{ 
    "result":"true", 
    "message":"btn1 was clicked" 
} 

Кнопка 2 нажмите:

{ 
    "result":"true", 
    "message":"btn2 was clicked" 
} 

Что я wan't сделать, это загрузить результаты данных JSON в элемент с идентификатором «# результаты "с использованием $ .ajax().

Так что, когда я пытаюсь:

$('#btn1', '#btn2').click(function() { 
    $.ajax({ 
     type: 'POST', 
     data: $(this).attr('id'), 
     url: 'process.php', 
     dataType: 'json', 
     success: function(data) { 
     var $results = $('#results'); 
     if(data.result == "true"){ 
      $results.html(data.message); 
     } else{ 
      $results.html("Sorry, your request produced an error"); 
     } 
     } 
    }); //end ajax 
    }); //end click 

Это не дает мне ничего. Я новичок в Ajax, поэтому я могу что-то упустить. Но для класса я просто должен нажать кнопку и загрузить его с PHP и вернуть его обратно в div id = "result". Но я пытаюсь сделать несколько кнопок, которые вы можете щелкнуть и на основе которых вы нажмете кнопку, даст другой ответ. Если есть гораздо более простой способ сделать это, дайте мне знать. Но я должен использовать функцию $ .ajax().

Спасибо за помощь!

Answer 1

Вы должны отправить данные в виде ключ/значение

data: {id: $(this).attr('id')}, 

Кроме того, ваш селектор является неправильным, она должна быть одна строка с запятой, отделяющей индивидуальные селекторы

$('#btn1, #btn2')