Ajax Post запрос без перезагрузки страницы?

Question

[Msklf]

Пробую передать post-запрос на одной странице без перезагрузки, ajax отрабатывает ок, в консоль все передается. Но php почему-то не хочет выводить.
Такой код:

Кнопка:

<a href="#" class="btn-edit" id="<?php echo $user['id']; ?>" onclick="give(this.id)"></a>

Ajax:

$(document).ready(function( ){
$('div a').click(function() {
$.ajax({  
        type: "POST",  
        url: "singers.php",  
        data: "idart="+this.id, 
        })
})
})

И php на этой же странице:
<?php echo $_POST['idart']; ?>

Кто знает, в чем тут причина ?

Comments

[facir]

1. give(this.id) - я так понимаю это функция? если да, то где она?
2. после нажатия любой ссылки сработает ваш пост запрос, в который не передастся ваш this.id

и вообще, что вы хотите сделать и какой результат получить?

[Msklf]

1. give(this.id) можно убрать, я тестировал получаем ли мы вообще id с кнопки через:

function give(val) {
  var obj = document.getElementById('testid');
  obj.innerHTML = val;
}

<div id="testid"></div>
Т.е. она нам не нужна.

2. Не совсем понял, что вы имеете в виду, ajax все ок передает, в form data получаю желаемый результат

Хочу получить следующее: при нажатии на кнопку, мы передаем id с помощью ajax, и выводим его в соседнем окне с помощью php.

[facir]

Msklf, в соседнем окне, или в div блоке?
если в соседнем окне, что это значит? должно открыться новое окно с результатом?

[Msklf]

facir Открывается при помощи js блок, вернее заменяет тот, на его позиции(все блоки выводятся из бд циклом), затем идет выборка из бд и возможность редактировать данную ячейку. Александр Рябов подсказал, но похоже варианты, что я тестил тоже работают(привел самый простой в вопросе). И я проверил отдельным файлом и все работает. Похоже или конфликт переменных или еще что-то, буду разбираться сейчас.

Answer 1

[Александр]

Где функция give(this.id)? И зачем она, если вы итак на событие onclick вешаете обработчик через jQuery?

P.S.

Попробуйте так

<?php if(empty($_POST['idart'])): $user['id'] = 'tosterUser'; ?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#user_link').click(function(){
        $.post({
            url: 'testo.php',
            data: 'idart=' + $(this).attr('data-id'),
            success: function(data){ $('#result').append('<br>' + data); }
        })
    });
});
</script>
<div id="result"><a href="#" id="user_link" data-id="<?php echo $user['id']; ?>">Кнопка</a></div>
<?php else: echo $_POST['idart']; endif; ?>

Comments

[Msklf]

Извините, забыл убрать give(this.id) пояснил в комментарии к своему посту. Сейчас попробую ваш вариант.

[Msklf]

Все работает, проверил отдельным файлом. Похоже у меня проблема внутри, т.к. на странице не срабатывает вывод POST данной переменной.

[Msklf]

Александр Рябов Возник вопрос, при обновлении данных

success: function(data){ $('#result').append('<br>' + data); }

съезжает верстка, и цикл php заодно. Можно ли как-то более локализировать что-ли данный процесс, или обойтись без него ?

[Александр]

Msklf, замените .append() на .html(). А ещё лучше, внутри нужного div-а сделайте элемент, соответствующий вёрстке, в который будет вставляться присылаемое через Ajax значение

[Msklf]

Александр Рябов .html() пробовал еще до вашего ответа, не выходило. Внутри div-а поигрался, что-то выходит, но очень криво, слишком много элементов цепляет. А нельзя, чтобы он специально не выводился?
Мне его надо использовать только для sql запроса.

[Александр]

Msklf, можно. Тогда просто в том же скрипте, на который вы отправляете POST запрос, вместо вывода выполняйте запрос.

[Msklf]

Александр Рябов не выходит все, не передаются туда данные, можете пожалуйста набросать пример ?

[Александр]

Msklf, вот например...

if(!empty($_POST['idart'])) // Проверка на то, пришёл ли ID
{
    // Если пришёл, то открывается соединение с БД MySQL и выполняется запрос
   mysqli_connect(...);
   mysqli_query(...);
   mysqli_result(...);
   // И т.д. и т.п.
}

Документация

[Msklf]

Александр Рябов,

Тогда по идее и такой запрос должен работать:

if(!empty($_POST['idart'])) // Проверка на то, пришёл ли ID
{
    $post_data = $_POST['idart']; 
    echo 'post_data: '.$post_data;
}

Но он не выводит, вот и думаю, что sql запрос также не сработает...

[Александр]

Msklf, у меня выводит...

[Msklf]

Александр Рябов Т.е. вот такой код у вас выводит значение ?

Файл index.php(т.е. в нем создаем и получаем):

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#user_link').click(function(){
        $.post({
            url: 'index.php',
            data: 'art_id=' + $(this).attr('data-id'),
            success: function(data){  }
        })
    });
});
</script>
<a href="#" id="user_link" data-id="73">Кнопка</a>


<?php
if(!empty($_POST['art_id'])) // Проверка на то, пришёл ли ID
{
    $post_data = $_POST['art_id']; 
 echo 'post_data: '.$post_data;
}

?>

Эту часть можно сократил, т.к. без разницы, в консоль передается все ок:

success: function(data){ $('#result').append('<br>' + data); }

[Александр]

Т.е. вот такой код у вас выводит значение ?

Msklf, да, такой

[Msklf]

Александр Рябов Тогда это совсем запутывает, точно такой же код отдельным файлом(сайтом на локалке) не работает, и на онлайн сервере тоже, но все же очень странно, что у вас работает, у меня нет, когда все остальные скрипты все работает ок.

[Александр]

Msklf, вот эту часть вы зря убрали

success: function(data){ $('#result').append('<br>' + data); }

Без неё скрипт ничего не выведет.

[Msklf]

Александр Рябов, дело в том, что и с ней не выводит, насколько понимаю, она передает значение по идентификатору. Но если у нас нету элемента с id="result" то и выводить некуда

[Александр]

Msklf, вы можете изменить #result на что угодно. Ранее написанный мной код должен сработать. Проверьте...

if(!empty($_POST['idart'])) // Проверка на то, пришёл ли ID
{
    // Если пришёл, то открывается соединение с БД MySQL и выполняется запрос
   mysqli_connect(...);
   mysqli_query(...);
   mysqli_result(...);
   // И т.д. и т.п.
}