Ajax несколько кнопок без березагрузок

@Web_proger · Регистрация: 29.02.2016

Author24 — интернет-сервис помощи студентам

Добрый вечер!
Люди добрый, столкнулся с такой проблемой, необходимо сделать действие кнопки submit, без перезагрузки страницы, да и не одной кнопке на странице, а несколько в не определенном количестве. Как реализовать немного разобрался, с одной кнопкой получается, но вот чтобы передавать и выводить информацию к той кнопке, которая была нажата, не выходит, или же тогда необходимо к каждой кнопке выводить скрипт ajax? Такое, я думаю не делают, вырастит в объемах страничка.

Пробовал сделать передачу данных от сервера по json типу, т.е. кнопкой отправляем на сервер и получаем от сервера массив данных, где укажем номер кнопки на которую нажали, но не могу прикрепить элемент массива к названию id div а точнее к #view (в JavaScript я новечек), пробую как в php, ничего не выходит:

Javascript

success: function(data){
   var str = [];
        forEach(data,function(key,value) {
            str.push('<b>' + key + '</b> = ' + value);
        });
        $('#view'.alert(str[1])).html( str.join('<br>') );

Подскажите, можно ли менять название view, добавляя к нему один элемент массива, переданного от сервера? Если можно, как прицепить элемент массива к view? Или может вообще существуют другие пути решения проблемы определения какой была нажата кнопки и к какой кнопке выводить переданную информацию

@Padonak · 01.03.2016, 00:23

Сообщение от Web_proger

Как ... передавать и выводить информацию к той кнопке, которая была нажата...

index.htm

HTML5

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>XZ</title>
<style>
body{
    text-align:center;
    font-family:Verdana,Helvetica;
    font-size:12px;
    color:#000;
    background-color:#fff;
    margin-top:30px;
    }
input[type=button]{
    display:block;
    margin-top:10px;
    cursor:pointer;
    }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
 
$('[id*=b_]').click(function(){
var id=$(this).attr('id');
$.get('server-side.php',function(data){
try{$('#temp').remove();}
catch(e){}
$('#'+id).after('<div id="temp">'+data+'</div>');
});
});
 
});
</script>
</head>
<body>
<center>
<input type="button" id="b_1" value="Кнопка 1" />
<input type="button" id="b_2" value="Кнопка 2" />
<input type="button" id="b_3" value="Кнопка 3" />
<input type="button" id="b_4" value="Кнопка 4" />
<input type="button" id="b_5" value="Кнопка 5" />
</center>
</body>
</html>

server-side.php

PHP

1
2
3

<?php
echo '<br />Ответ<br />сервера<br />';
?>

@Web_proger · 01.03.2016, 17:52 **[ТС]**

Спасибо большое, за ответ! Извиняюсь, что сразу нюансы не указал...нужно чтобы кнопка при нажатии исчезала, а текст ответа появлялся вместо неё. В старом коде, я такое осуществил поместив в div саму кнопку и при нажатии кнопка исчезала и ответ появлялся. Здесь замену чем можно реализовать? Такой как был у меня вариант, я вижу не пройдет...т.к. div находится в <head>.

Нужно при нажатии отправить, без перезагрузки страницы, два параметра из формы и формы, получается у каждой кнопки своя, я в файле server-side.php смогу принять данные методом GET? Я понимаю, они таким способом передаются... сейчас буду разбираться в вашем методе...

Добавлено через 16 часов 11 минут
Замену кнопки ответом реализована, применил функцию замены элементов replaceWith и убрал $.get('server-side.php',function(data){
try{$('#temp').remove();}

Подскажите, как правильно подцепить данные из форм от каждой кнопки, например скрытые поля <input type="hidden" name="name" value="Vasya">, для отправки в обработчик? И принять их можно в php var_dump($_GET);? Может это банальный вопрос, извините, если что...только учусь jquery

@Padonak · 01.03.2016, 18:33

почитайте про .serialize()

Добавлено через 6 минут
А про обработку данных в пхп почитайте, например, тут

@Web_proger · 01.03.2016, 19:15 **[ТС]**

спасибо, прочитал, создаю переменную со значением строчных данных serialize(); вот так var s = $('form').serialize(); и передаю их обработчику, а приходят данные всех форм, всех кнопок, независимо на какую кнопку нажали, т.е. я не могу прицепить данные именно той формы, кнопку которой нажали...может есть функция, которая отыщи данные той формы, на кнопку которой нажали? Или форму как то обозначить, а потом искать нужную...

@Web_proger 0 / 0 / 0 Регистрация: 29.02.2016 Сообщений: 3
	01.03.2016, 17:52 [ТС]	3
	Спасибо большое, за ответ! Извиняюсь, что сразу нюансы не указал...нужно чтобы кнопка при нажатии исчезала, а текст ответа появлялся вместо неё. В старом коде, я такое осуществил поместив в div саму кнопку и при нажатии кнопка исчезала и ответ появлялся. Здесь замену чем можно реализовать? Такой как был у меня вариант, я вижу не пройдет...т.к. div находится в <head>. Нужно при нажатии отправить, без перезагрузки страницы, два параметра из формы и формы, получается у каждой кнопки своя, я в файле server-side.php смогу принять данные методом GET? Я понимаю, они таким способом передаются... сейчас буду разбираться в вашем методе... Добавлено через 16 часов 11 минут Замену кнопки ответом реализована, применил функцию замены элементов replaceWith и убрал $.get('server-side.php',function(data){ try{$('#temp').remove();} Подскажите, как правильно подцепить данные из форм от каждой кнопки, например скрытые поля <input type="hidden" name="name" value="Vasya">, для отправки в обработчик? И принять их можно в php var_dump($_GET);? Может это банальный вопрос, извините, если что...только учусь jquery 0

@Padonak Философ-разговорник 1066 / 391 / 120 Регистрация: 20.02.2016 Сообщений: 884 Записей в блоге: 1
	01.03.2016, 18:33	4
	почитайте про .serialize() Добавлено через 6 минут А про обработку данных в пхп почитайте, например, тут 0

@Web_proger 0 / 0 / 0 Регистрация: 29.02.2016 Сообщений: 3
	01.03.2016, 19:15 [ТС]	5
	спасибо, прочитал, создаю переменную со значением строчных данных serialize(); вот так var s = $('form').serialize(); и передаю их обработчику, а приходят данные всех форм, всех кнопок, независимо на какую кнопку нажали, т.е. я не могу прицепить данные именно той формы, кнопку которой нажали...может есть функция, которая отыщи данные той формы, на кнопку которой нажали? Или форму как то обозначить, а потом искать нужную... 0