Отправка запроса через onclick

@LVV · Регистрация: 15.02.2010

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

Имеется список:

HTML5

<form>
       <select  size=4 name="sbornic">
            <option disabled selected>Выберите сборник</option>
                    <option value=1>Первый  </option>
                    <option value=2>Второй  </option>
                    <option value=3>Третий  </option>
        </select>
</form>

Как отправить на сервер запрос со значением соответствующего value без использования <input> или <button>, а простым кликом ЛКМ на определённом пункте списка? Подскажите теги, атрибуты или примерчик скрипта.

@Вечно_молодой · 22.07.2018, 09:30

Javascript

const selectMenu = document.querySelector('select[name=sbornic]');
const div = document.querySelector('#someDiv')
 
function sendData(){
    var xhr = new XMLHttpRequest();
    
    //По личному опыту понял, что лучше передавать в формате json, 
    //потому что, например, xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 
    //имеет зарезервированные символы, которые не передадутся, а php легко поймет json
    var jsonStr = JSON.stringify({
        "selectMenu": selectMenu.options[selectMenu.selectedIndex].value
    });
    
    xhr.open('POST', 'handler.php');
    xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
    xhr.send(jsonStr);
    
    xhr.onreadystatechange = function(){
        if(xhr.readyState != 4){
            return;
            
        }
        if(xhr.status == 200){
             div.innerHTML = xhr.response;
        }
        else{
            div.innerHTML = 'Не удалось связаться с сервером!';
        }
    }
}
 
selectMenu.onchange = function(){   
    sendData()
}

@LVV · 22.07.2018, 11:02 **[ТС]**

Спасибо, Вечно_молодой.
Только я "новичек", и мне бы чуть подробнее... куда... и что...
Вот так вот не работает:

PHP/HTML

<html>
<head>
<title>web</title>
         <script>
        const selectMenu = document.querySelector('select[name=sbornic]');
        const div = document.querySelector('#someDiv')
 
        function sendData() {
            var xhr = new XMLHttpRequest();
 
            //По личному опыту понял, что лучше передавать в формате json,
            //потому что, например, xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            //имеет зарезервированные символы, которые не передадутся, а php легко поймет json
            var jsonStr = JSON.stringify({
                "selectMenu": selectMenu.options[selectMenu.selectedIndex].value
            });
 
            xhr.open('POST', 'handler.php');
            xhr.setRequestHeader('Content-type', 'application/json; charset=windows-1251');
            xhr.send(jsonStr);
 
            xhr.onreadystatechange = function () {
                if (xhr.readyState != 4) {
                    return;
 
                }
                if (xhr.status == 200) {
                    div.innerHTML = xhr.response;
                }
                else {
                    div.innerHTML = 'Не удалось связаться с сервером!';
                }
            }
        }
 
        selectMenu.onchange = function () {
            sendData()
        }
    </script>
 
</head>
<body>
 
<form>
       <select onclick=sendData() size=4 name="sbornic">
            <option disabled selected>Выберите сборник</option>
                    <option value=1>Первый  </option>
                    <option value=2>Второй  </option>
                    <option value=3>Третий  </option>
        </select>
</form>
 
 
</body>
</html>

@Вечно_молодой · 22.07.2018, 21:08

Этот скрипт, который я накидал, нужно ставить перед закрывающим тегом </body>, а не в <head>. Чтобы сначала элементы подгрузились.
Вы отправляете ajax-ом запрос на сервер, а от сервера придет ответ, и вам нужно куда его поместить - нужно создать какой-то div и поэтому пишем строку const div = document.querySelector('#someDiv'). Кстати, теги <form> и </form> вам здесь не нужны - сразу начинайте с "<select>...</select>". Вместо "

HTML5

1	<select onclick=sendData() size=4 name="sbornic">

"нужно просто

HTML5

1	<select size=4 name="sbornic">

- так все события прописаны в скрипте. В скрипте именно должно быть событие onchange, а не onclick.
Должен быть файл "handler.php" (или как там он у вас называется) - он получит переменную в формате json из браузера. В самом php должно быть, как минимум:

PHP

1
2
3

$jsonStr = file_get_contents('php://input'); //Так принимается json в php
$var = json_decode($jsonStr, true);
echo $var;

Именно

PHP

1	echo $var;

выведется в браузере в div#someDiv, который вы создали ранее.

@LVV · 23.07.2018, 09:30 **[ТС]**

Спасибо, Вечно_молодой.
Попробую разобраться со всем, что Вы написали.
Отпишусь позже.

Добавлено через 2 часа 24 минуты
Еще раз спасибо.
Всё заработало!!!

Добавлено через 2 часа 7 минут
А если у меня два списка <select>, тогда как быть?
Два скрипта делать с разными именами функций и переменных для каждого списка?

PHP/HTML

<html>
<head>
<title>web</title>
</head>
<body>
<select  size=4 name="sbornic">
            <option disabled selected>Выберите сборник</option>
                    <option value=1-sbornic>Первый сборник</option>
                    <option value=2-sbornic>Второй сборник</option>
                    <option value=3-sbornic>Третий сборник</option>
</select>
 
<br><br><br>
 
<select  size=4 name="turnir">
            <option disabled selected>Выберите турнир</option>
                    <option value=1-turnir>Первый турнир</option>
                    <option value=2-turnir>Второй турнир</option>
                    <option value=3-turnir>Третий турнир</option>
</select>
 
 
 <script>
        const selectMenu = document.querySelector('select[name=sbornic]');
        const div = document.querySelector('#someDiv')
 
        function sendData() {
            var xhr = new XMLHttpRequest();
 
            var jsonStr = JSON.stringify({
                "selectMenu": selectMenu.options[selectMenu.selectedIndex].value
            });
 
            xhr.open('POST', 'handler.php');
            xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
            xhr.send(jsonStr);
 
            xhr.onreadystatechange = function () {
                if (xhr.readyState != 4) {
                    return;
 
                }
                if (xhr.status == 200) {
                    div.innerHTML = xhr.response;
                }
                else {
                    div.innerHTML = 'Не удалось связаться с сервером!';
                }
            }
        }
 
        selectMenu.onchange = function () {
            sendData()
        }
    </script>    
 
 
<script>
        const selectMenu1 = document.querySelector('select[name=turnir]');
        const div1 = document.querySelector('#someDiv')
 
        function sendData1() {
            var xhr1 = new XMLHttpRequest();
 
            var jsonStr1 = JSON.stringify({
                "selectMenu1": selectMenu1.options[selectMenu1.selectedIndex].value
            });
 
            xhr1.open('POST', 'handler.php');
            xhr1.setRequestHeader('Content-type', 'application/json; charset=utf-8');
            xhr1.send(jsonStr1);
 
            xhr1.onreadystatechange = function () {
                if (xhr1.readyState != 4) {
                    return;
 
                }
                if (xhr1.status == 200) {
                    div1.innerHTML = xhr1.response;
                }
                else {
                    div1.innerHTML = 'Не удалось связаться с сервером!';
                }
            }
        }
 
        selectMenu1.onchange = function () {
            sendData1()
        }
    </script>   
 
 
 
 </body>
</html>

Оно то работает, но меня терзают смутные сомнения, что это как-то по дилетантски я сделал...

@maxoun · 23.07.2018, 10:37

Сообщение от Вечно_молодой

2
3
$jsonStr = file_get_contents('php://input'); //Так принимается json в php

Это уже перебор, JSON принимается обычно потому что это всего лишь строки. И здесь file_get_contents() не обязателен.

@Вечно_молодой · 23.07.2018, 13:39

Разумеется, не нужно записывать на каждый dom-элемент одну и ту же функцию. Если файл-обработчик на стороне сервера один и тот же, то в js можно взять все элементы <select> по классу, сделать цикл и к каждому элементу цикла применять ajax-функцию по событию

Добавлено через 9 минут
Это уже перебор, JSON принимается обычно потому что это всего лишь строки. И здесь file_get_contents() не обязателен.

Как еще можно принять json?

@LVV · 23.07.2018, 15:35 **[ТС]**

Сообщение от Вечно_молодой

в js можно взять все элементы <select> по классу, сделать цикл и к каждому элементу цикла применять ajax-функцию по событию

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

1) у меня есть два (или больше) списка <select> и нужно, чтобы при выборе любого значения на сервер отправлялся запрос.
2) мне не нужны меры предосторожности типа: 'Не удалось связаться с сервером!'
3) на стороне сервера запрос от клиента обрабатывается программой-сервером С++ типа такой, которая парсит заголовок запроса и ищет нужную информацию. Так что json, на сколько я понимаю, мне не нужен.

Так вот, мне нужно просто, чтобы в запросе при клике на <option> к серверу, с которым уже установлена связь, отправлялся запрос с соответствующим value.

@Вечно_молодой · 23.07.2018, 15:55

А файл обработчик в С++ один и тот же?

@LVV · 23.07.2018, 18:44 **[ТС]**

Работаю в Visual Studio.
Хочу сделать что-то вроде этого (только в упрощенном виде и чтобы работало локально с любого компа без инсталляционной мороки).
Сервер по аналогии с этим.
Ну, а дальше анализирую запросы, посылаю свои в зависимости от полученных запросов(ответов) от клиента.
API не использую. Муторно и долго с ними разбираться. Просто вытягиваю из клиентских заголовков то, что мне нужно.
Создаю отдельные обработчики для каждого нужного случая в виде cpp-файла в ресурсах.
Затем формируется заголовок и веб-страничка и отправляется клиентскому браузеру.
Ну, в общем, как-то так.

@Mr_Sergo · 23.07.2018, 18:52

LVV,
Не знаком с C++ , могу накидать пример как это делается на JS+PHP, если интересует дайте знать...

@LVV · 23.07.2018, 19:08 **[ТС]**

Спасибо, zlojnaxa.
Я уже остановился на варианте, предложенном здесь.
А в ообще, мне нужен самый простой и лаконичный способ отправки браузером запроса при клацании на пункте списка <select> в веб-страничке. И все.

Если есть что-то проще, буду рад это увидеть.

@Mr_Sergo · 23.07.2018, 19:33

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

у меня есть два (или больше) списка <select> и нужно, чтобы при выборе любого значения на сервер отправлялся запрос.

Вы писали что вам нужно "два и более"- я в этом плане могу помочь...
Или вы уже справились с задачей?

@LVV · 23.07.2018, 19:53 **[ТС]**

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

Или вы уже справились с задачей?

Да. Вот решение.
По-дилетантски, правда. Но работает.
Если у Вас есть более умный вариант, то хотелось бы увидеть...

@Mr_Sergo · 23.07.2018, 21:16

LVV,

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

более умный вариант

Не ручаюсь насколько мой вариант лучше или хуже да и к тому же к профи я себя не отношу. Мне кажется просто покороче записан:

HTML5

<body>
    <select  size=4 name="sbornic">
        <option disabled selected>Выберите сборник</option>
        <option value=1>Первый  </option>
        <option value=2>Второй  </option>
        <option value=3>Третий  </option>
    </select>
    <select  size=4 name="sbornicTen">
        <option disabled selected>Выберите сборник</option>
        <option value=10>Десятый  </option>
        <option value=20>Двадцатый  </option>
        <option value=30>Тридцатый  </option>
    </select>
 
    <div id="result"></div>    <!-- этот div можете смело удалять, он просто для визуальной проверки ответа от сервера  -->
</body>

Ну и JS (ставьте его сразу после <div id="result"></div> ):

Javascript

<script>
    [...document.getElementsByTagName('select')].map((e)=>
        e.addEventListener('change',()=>{
            let selected = e.value;
            ajaxRequest('handler.php','selected='+selected);
        },false)
    );
    function ajaxRequest(url,value){
        let request = new XMLHttpRequest();
        request.open('POST', url, true);
        request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
        request.addEventListener('readystatechange', function() {
            if(request.readyState == 4 && request.status == 200) {
                document.getElementById('result').innerHTML = 'Ответ от сервера: '+this.responseText; // чисто для проверки ответа вывел ответ от сервера в DIV, удалите если не нужно
            }
        });
        request.send(value);
    }
</script>

Ну и php- поскольку в C++ я ноль:

PHP

1	echo $_POST['selected'];

Таким образом отправляется сам value... можно без тега <form> --- без разницы.
Событие я повесил не на name, как у вас, а на сам тег --- в разных ситуациях это может вызвать конфликты если, допустим, у вас на странице имеются еще какие-то select-ы выполняющие другой функционал, если это так то напишите- поправлю.
Нуу... поклацайте, потестите, отпишитесь.
===============
===============
===============
Добавлено через 18 минут
Пардон... про name то я забыл:

HTML5

<body>
    <select  size=4 name="sbornic">
        <option disabled selected>Выберите сборник</option>
        <option value=1>Первый  </option>
        <option value=2>Второй  </option>
        <option value=3>Третий  </option>
    </select>
    <select  size=4 name="sbornicTen">
        <option disabled selected>Выберите сборник</option>
        <option value=10>Десятый  </option>
        <option value=20>Двадцатый  </option>
        <option value=30>Тридцатый  </option>
    </select>
 
    <div id="result"></div>    <!-- этот div можете смело удалять, он просто для визуальной проверки ответа от сервера  -->
</body>

Javascript

[...document.getElementsByTagName('select')].map((e)=>
    e.addEventListener('change',()=>{
        let selected = e.value;
        let name = e.getAttribute('name');
        ajaxRequest('handler.php',name+'='+selected);
    },false)
);
function ajaxRequest(url,value){
    let request = new XMLHttpRequest();
    request.open('POST', url, true);
    request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
    request.addEventListener('readystatechange', function() {
        if(request.readyState == 4 && request.status == 200) {
            document.getElementById('result').innerHTML = 'Ответ от сервера: '+this.responseText;
        }
    });
    request.send(value);
}

PHP

1	echo $_POST['sbornicTen'].$_POST['sbornic'];

@LVV · 23.07.2018, 23:41 **[ТС]**

Спасибо, zlojnaxa.

Я тут подумал...
Мне, оказывается, и value не обязательно для списка определять. Достаточно на сервер отправить индекс (номер) элемента списка. Поэтому, после тщательных сокращений получил такой вот рабочий код, который меня вполне устраивает. Спасибо всем.

PHP/HTML

<html>
<head>
<title>web</title>
</head>
<body>
 
<select  size=4 name="sbr">
            <option disabled selected>Выберите сборник</option>
                    <option>Первый сборник</option>
                    <option>Второй сборник</option>
                    <option>Третий сборник</option>
</select>
<br><br>
<select  size=4 name="trn">
            <option disabled selected>Выберите турнир</option>
                    <option>Первый турнир</option>
                    <option>Второй турнир</option>
                    <option>Третий турнир</option>
</select>
 
 
<script>
const Sbornic = document.querySelector('select[name=sbr]');//отслеживаем первый список
const Turnir = document.querySelector('select[name=trn]');//отслеживаем второй список 
 
function Data(n) //параметр n - это номер списка
{
 
            var x = new XMLHttpRequest(); //переменная для запросов к серверу без перезагрузки страницы
        if (n==1)            
            var s = JSON.stringify( {"Sbornic": Sbornic.options[Sbornic.selectedIndex].index} );
        else
            var s = JSON.stringify( {"Turnir": Turnir.options[Turnir.selectedIndex].index} );
          
    x.open('POST','');
                x.send(s );//отправка запроса
 }
 Sbornic.onchange = function () { Data(1) }//событие onchange происходит, когда изменяется выделение в списке;
 Turnir.onchange = function () { Data(2) }//номер списка (1 или 2) передаётся функции для обработки
</script> 
 
   
</body>
</html>

@Mr_Sergo · 23.07.2018, 23:47

Не по теме:

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

который меня вполне устраивает

Самое главное :)

@LVV 155 / 137 / 46 Регистрация: 15.02.2010 Сообщений: 750
	23.07.2018, 19:53 [ТС]	14
	Сообщение от zlojnaxa Или вы уже справились с задачей? Да. Вот решение. По-дилетантски, правда. Но работает. Если у Вас есть более умный вариант, то хотелось бы увидеть... 0

@maxoun 21 / 44 / 11 Регистрация: 08.02.2018 Сообщений: 443
	23.07.2018, 10:37	6
	Сообщение от Вечно_молодой 2 3 $jsonStr = file_get_contents('php://input'); //Так принимается json в php Это уже перебор, JSON принимается обычно потому что это всего лишь строки. И здесь file_get_contents() не обязателен. 0

@Вечно_молодой 2 / 2 / 1 Регистрация: 21.07.2018 Сообщений: 5
	23.07.2018, 13:39	7
	Разумеется, не нужно записывать на каждый dom-элемент одну и ту же функцию. Если файл-обработчик на стороне сервера один и тот же, то в js можно взять все элементы <select> по классу, сделать цикл и к каждому элементу цикла применять ajax-функцию по событию Добавлено через 9 минут Это уже перебор, JSON принимается обычно потому что это всего лишь строки. И здесь file_get_contents() не обязателен. Как еще можно принять json? 0

@LVV 155 / 137 / 46 Регистрация: 15.02.2010 Сообщений: 750
	23.07.2018, 15:35 [ТС]	8
	Сообщение от Вечно_молодой в js можно взять все элементы <select> по классу, сделать цикл и к каждому элементу цикла применять ajax-функцию по событию для меня это звучит примерно так же как и "с точки зрения банальной эрудиции не каждый индивидуум способен различать парадоксальные эмоции" Красиво, но не совсем понятно. 1) у меня есть два (или больше) списка <select> и нужно, чтобы при выборе любого значения на сервер отправлялся запрос. 2) мне не нужны меры предосторожности типа: 'Не удалось связаться с сервером!' 3) на стороне сервера запрос от клиента обрабатывается программой-сервером С++ типа такой, которая парсит заголовок запроса и ищет нужную информацию. Так что json, на сколько я понимаю, мне не нужен. Так вот, мне нужно просто, чтобы в запросе при клике на <option> к серверу, с которым уже установлена связь, отправлялся запрос с соответствующим value. 0

@Вечно_молодой 2 / 2 / 1 Регистрация: 21.07.2018 Сообщений: 5
	23.07.2018, 15:55	9
	А файл обработчик в С++ один и тот же? 0

@LVV 155 / 137 / 46 Регистрация: 15.02.2010 Сообщений: 750
	23.07.2018, 18:44 [ТС]	10
	Работаю в Visual Studio. Хочу сделать что-то вроде этого (только в упрощенном виде и чтобы работало локально с любого компа без инсталляционной мороки). Сервер по аналогии с этим. Ну, а дальше анализирую запросы, посылаю свои в зависимости от полученных запросов(ответов) от клиента. API не использую. Муторно и долго с ними разбираться. Просто вытягиваю из клиентских заголовков то, что мне нужно. Создаю отдельные обработчики для каждого нужного случая в виде cpp-файла в ресурсах. Затем формируется заголовок и веб-страничка и отправляется клиентскому браузеру. Ну, в общем, как-то так. 0

@Mr_Sergo 2034 / 1093 / 408 Регистрация: 29.04.2016 Сообщений: 2,612
	23.07.2018, 18:52	11
	LVV, Не знаком с `C++` , могу накидать пример как это делается на JS+PHP, если интересует дайте знать... 0

@LVV 155 / 137 / 46 Регистрация: 15.02.2010 Сообщений: 750
	23.07.2018, 19:08 [ТС]	12
	Спасибо, zlojnaxa. Я уже остановился на варианте, предложенном здесь. А в ообще, мне нужен самый простой и лаконичный способ отправки браузером запроса при клацании на пункте списка <select> в веб-страничке. И все. Если есть что-то проще, буду рад это увидеть. 0

@Mr_Sergo 2034 / 1093 / 408 Регистрация: 29.04.2016 Сообщений: 2,612
	23.07.2018, 19:33	13
	Сообщение от LVV у меня есть два (или больше) списка <select> и нужно, чтобы при выборе любого значения на сервер отправлялся запрос. Вы писали что вам нужно "два и более"- я в этом плане могу помочь... Или вы уже справились с задачей? 0

@Mr_Sergo
	23.07.2018, 23:47 Отправка запроса через onclick #17
	Не по теме: Сообщение от LVV который меня вполне устраивает Самое главное :) 0

Отправка запроса через onclick

Решение