@EVGenyK_ch

Как правильно передать несколько параметров data в AJAX функцию?

Всем привет!
Столкнулся с такой проблемой: объявил несколько переменных в ajax, и хочу их передать, но в ответе получаю либо objectobject либо nan, подскажите пожалуйста как передать все переменные чтобы они отображались.
Только начинаю осваивать php
Пытался передать несколькими способами:
data: { name: "John", location: "Boston" }
data: "key=" + key,
data: {'key': key}

Вот что передаю:
<?php
var_dump($_POST);
?>

$("#interset").click(function (){
    let value_a = $('input[name="a"]');
    let value_b = $('input[name="b"]');
    let value_c = $('input[name="c"]');
        console.log(value_a,value_b,value_c);
        $.ajax({
           type:'POST',
            data: 
               "a": value_a

            ,

            url:'services/quad_equ.php',
            success:function (res){
               $('.answer_quad_equ').html(res);
            },
            error: function (){
               alert("Ошибка");
            }
        });
});
$("#interset").click(function(event) {
        event.preventDefault();
        return false;
    });

<div class="answer_quad_equ">
        
    </div>
<form method="POST">
    <div>a=<input type="text" name="a" placeholder="1"></div>
    <div>b=<input type="text" name="b" placeholder="6"></div>
    <div>b=<input type="text" name="c" placeholder="9"></div>
    <input type="submit" id="interset" name="go_quad_equ" value="Решить">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  • Вопрос задан
  • 130 просмотров
Решения вопроса 1
@TheAndrey7
Без древнего jQuery не намного сложнее стало.
document.addEventListener('DOMContentLoaded', function() { // Дожидаемся загрузки страницы

	const form = document.getElementById('post_quad_equ'); // Ищем тег форм по атрибуту id
	const result = document.getElementById('answer_quad_equ'); // Куда выводим результат (не забываем прописать id html-элементу)

	form.addEventListener('submit', function(event) {
		event.preventDefault(); // Блокируем стандартное поведение формы (замена устаревшему 'return false')

		const data = new FormData(this); // this это HTMLFormElement

		const request = new XMLHttpRequest();
		request.responseType = 'text';
		request.open('POST', 'services/quad_equ.php'); // Лучше в атрибуте form action хранить и получать здесь из this.action

		request.onload = function() {
			result.textContent = request.response; // Если в ответе нет HTML-тегов, этот метод безопаснее
			// result.innerHTML=request.response; // Если нужен HTML
		};

		request.onerror = function() {
			alert("Ошибка запроса");
		};

		request.send(data);
	});
});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@lil_koi
лучший из худших
Этим кодом создадим формаду для запроса:
let data = new FormData($('form'));
Потом передаёшь в data эту переменную и у тебя там будет всё, что тебе нужно
Ответ написан
@EVGenyK_ch Автор вопроса
крч все оказалось намного проще, если кому-то пригодится то используйте метод .serialize() в передаче переменных
var data = $('form').serialize();
p.s. , спасибо за вариант с чистым js, я согласен что лишние библиотеки не нужны, но возможно кому-то пригодится вариант с jquery
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы