Как передать значения post / route в JQuery Ajax POST-запрос?

Question

Попытка ajaxify "любимый эта песня".

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

У нас есть следующая разметка

<div id="favorite-song"></div>

То, как я бы это сделал, используя ASP.NET ajax внутри представления

<div id="favorite-song"><%= Ajax.ActionLink("Make this your favorite", "FavoriteSong", new { id = Model.ID }, new AjaxOptions {...}) %></div>

При использовании jQuery я прикрепляю событие onclick к # favour-song для запуска запроса ajax.post. Но как передать идентификатор песни или значения post / route в целом в запрос jQuery?

Редактировать: Чтобы быть более конкретным - Как мы передаем этот Model.ID (который является идентификатором песни) в JavaScript?

<ч /> Edit2: Так что один из способов сделать это - добавить этот идентификатор песни как часть разметки и извлечь его из DOM в jQuery примерно так:

<div id="favorite-song"><span id="SongID-<%= Model.ID %>"></span></div>

И затем, когда мы выполняем запись AJAX в jQuery, мы получаем идентификатор этого диапазона, удаляем «SongID-» спереди и вуаля, у нас есть идентификатор песни.

Есть ли альтернативный / лучший способ сделать это?

Answer 1

Вы можете использовать атрибуты html5 data-* для хранения дополнительных данных в теге html. Это работает во всех последних браузерах.

<span data-songid="12345">

Используя метод, который вы описали при редактировании, вы можете легко получить его, используя JavaScript, без разбора. И вы можете предоставить более одного тега data- для одного элемента.

// Get the songid
var songid = $(this).attr("data-songid");

Answer 2

ЕСЛИ вам не нужна часть SongID по какой-то другой причине, которую вы МОЖЕТЕ выбрать через относительную ссылку, чтобы получить идентификатор, такой как:

var songid = $('#favorite-song').find('span').attr('id');

ИЛИ для доступа к нему по клику:

<div id="favorite-song"><span id='mysongid'>Make this your favorite</span></div>

$('#favorite-song').click().find('span').attr('id');

ИЛИ более просто:

$('#favorite-song span').click().attr('id');

ИЛИ, чтобы получить это как кнопку «сохранить»:

$('#favorite-song span').click(function()
    {
      var mysongid = $(this).attr('id');
      $.ajax({
          url: "mypage.aspx/savesong",
          global: false,
          type: "POST",
          data: ({songid : mysongid }),
          dataType: "html",
          success: function(msg){
             alert(msg);
          }
       });
});

и на вашей странице ASPX:

[WEBMETHOD]
savesong(string songid)
{
...

Если вам действительно нужен SongID - по какой-то причине вы можете удалить его либо на стороне клиента, либо на стороне сервера ... до вас, где.

Answer 3

если у вас есть

<div id="favorite-song"></div>

Как селектор для запуска события. Тогда

var id = $(this).attr("id");
//this will give you "favorite-song"
console.log(id);

или

var id = this.id;
//this will give you "favorite-song"
console.log(id);

Предоставит вам идентификатор элемента, по которому щелкнул пользователь, который соответствует селектору.

Но я бы изменил селектор на класс, а затем использовал бы идентификатор в качестве уникального идентификатора, например

 <div id="song_1" class="favorite-song"></div>

Тогда в js-файле используйте это

$(document).ready(function(){
    $(".favorite-song").live("click", get_song);
});

function get_song(){
   var id = $(this).attr("id").replace("song_", "");

   //this will give you 1       
   console.log(id);
}

Так что теперь вы можете передать идентификатор серверному скрипту с помощью AJAX, используя

var data = {};

data.id = id;

$.ajax({
    url: "/path",
    type: "POST",
    data: data,
    success: function(response){
        console.log(response);
    }
});

Answer 4

Просто укажите JQuery свой маршрут для отправки на него, точные значения будут зависеть от вашего контроллера.

если у вас есть что-то вроде

public class FoodController:Controller
{
    [HttpPost]
    public ActionResult FavoriteFood(int id)
    {
       ....
    }
}

, тогда дайте JQuery адрес http://yoursite/Food/FavoriteFood/# (где # - идентификатор еды) для публикации.