Вывод двух переменных с AJAX?

Question

[lUser L]

Есть такой

AJAX запрос

$.ajax({
          url: 'follow.php' ,
          type: 'POST',
          data: {id: id},
          success:(data) => {
                          ????
          }
      });

Который отправляет данные на страницу follow.php на follow.php есть 2 переменные param1 и param2

param1 нужно вывести в первый div <div class="param1">param1</div>

a param2 нужно вывести во вторую div <div class="param2">param2</div>

если использовать $('.param1').html(data); то выведет оба переменных в одну див.

з.ы.Я плохо разбираюсь в ajax настолько плохо , что не смог объяснить свой вопрос гуглу , но надеюсь вы поймете ))

Comments

[irishmann]

Код php покажи

[lUser L]

irishmann, если упрощенно то так: после sql запроса выводится echo $param1; echo $param2;

[irishmann]

Эмиль Гасанов, неудобно сделали, до компа дойду - отпишусь как сделать получше

[Михаил]

Эмиль Гасанов, в json отправляйте обратно

Answer 1

[irishmann]

Чтобы JS и PHP смогли друг друга понять я использую JSON, на самом деле ожно использовать что душе угодно, но это самый простой для меня способ.

follow.php

<?php
	//получаем $_POST['id'], работаем с ним, и на выходе 2 параметра
	$param1 = 'Первый параметр';
	$param2 = 'Второй параметр';
	//создаем массив,
	$response = [
		'param1' => $param1,
		'param2' => $param2
	];
	//выводим массив, предварительно закодировав в JSON
	echo json_encode($response);

в AJAX нужно тоже указать что PHP ответит нам JSON'ом

AJAX-запрос

$.ajax({
	url: 'follow.php' ,
	dataType: 'JSON', // тип данных, которые должны к нам попасть
	type: 'POST',
	data: {id: id},
	success:(data) => {
		//тут data уже преобразован в массив
		// можно точно так же как и в php к нему обращаться
		$('.param1').html(data['param1']);
		$('.param2').html(data['param2']);
	}
});

Comments

[Enj0y]

В AJAX не нужно указывать тип данных если выставить в PHP заголовок

header('Content-Type: application/json; charset=utf-8');

Answer 2

[DiaTMss]

Есть форма

spoiler

<form id="book_form" method="POST" action="/submit/book">
        <div id="message">
            <?php if (!empty($_SESSION['messages'])) echo $_SESSION['messages'];?>
        </div>
        <div>
            <label for="title">Title</label>
            <input type="text" name="title" id="title" class="u-full-width" autocomplete="off" value="<?php if (!empty($_SESSION['title'])) echo $_SESSION['title'];?>">
        </div>
        <div>
            <label for="author">Author</label>
            <input type="text" name="author" id="author" class="u-full-width" autocomplete="off" value="<?php if (!empty($_SESSION['author'])) echo $_SESSION['author'];?>">
        </div>
        <div>
            <label for="isbn">ISBN#</label>
            <input type="text" name="isbn" id="isbn" class="u-full-width" autocomplete="off" value="<?php if (!empty($_SESSION['isbn'])) echo $_SESSION['isbn'];?>">
        </div>
        <div>
            <input type="submit" name="submit" value="Submit" class="u-full-width">
        </div>
    </form>

Получаем данные из формы

spoiler

document.getElementById('book_form').addEventListener('submit', function(event)
	{
		var title  = document.getElementById('title').value,
			author = document.getElementById('author').value,
			isbn   = document.getElementById('isbn').value;

		title  = title.trim();
		author = author.trim();
		isbn   = isbn.trim();

		var params = 'title=' + title + '&author=' + author + '&isbn=' + isbn + '&submit=Submit';

		getAjax('POST', '/submit/book', params, getShowAlert);

		event.preventDefault();
	}, false);

spoiler

function getAjax(method, uri, params, action)
{
	xhr.open(method, uri, true);

	if (xhr && method === 'GET')
	{
		xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
	}

	else if (xhr && method === 'POST')
	{
		xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	}

	xhr.onreadystatechange = action;

	xhr.send(params);
}

spoiler

var getShowAlert = function()
	{
		if (xhr.readyState === 4)
		{
			if (xhr.status === 200)
			{
				var mes = JSON.parse(xhr.responseText);

				if (mes.message.error)
				{
					showAlert(mes.message.error, 'error');
				}

				else if(mes.message.success)
				{
					getAjax('GET', '/', null, getContent);
					showAlert(mes.message.success, 'success');
					clearFields();
				}
			}

			else console.log(xhr.status + ' (' + xhr.statusText + ')');
		}
	}

Нужен ещё csrf token

spoiler

function isAjax() { return (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH'])) ? true : false;}

    $uri = $_SERVER['REQUEST_URI'];
    
   else if ($uri === '/submit/book')
    {
        if (isAjax())
        {
            if ($_SERVER['REQUEST_METHOD'] === 'POST')
            {
                if (isset($_POST['submit']) && !empty($_POST['submit']))
                {
                    $title  = htmlspecialchars(trim($_POST['title']));
                    $author = htmlspecialchars(trim($_POST['author']));
                    $isbn   = htmlspecialchars(trim($_POST['isbn']));

                    if (empty($title) || empty($author) || empty($isbn)) echo '{"message":{"error":"Please fill in all fields"}}';

                    else
                    {
                        if ($models->insertItem($title, $author, $isbn)) echo '{"message":{"success":"Book item create!"}}';
                        else echo '{"message":{"error":"Book item no create!"}}';
                    }
                }
            }
        }

        else
        {
            if ($_SERVER['REQUEST_METHOD'] === 'POST')
            {
                if (isset($_POST['submit']) && !empty($_POST['submit']))
                {
                    $title  = htmlspecialchars(trim($_POST['title']));
                    $author = htmlspecialchars(trim($_POST['author']));
                    $isbn   = htmlspecialchars(trim($_POST['isbn']));

                    if (empty($title) || empty($author) || empty($isbn))
                    {
                        $_SESSION['title']  = $title;
                        $_SESSION['author'] = $author;
                        $_SESSION['isbn']   = $isbn;
                        $_SESSION['messages'] = '<div class="error">Please fill in all fields</div>';

                        header('Location: /');
                        exit;
                    }

                    else
                    {
                        if ($models->insertItem($title, $author, $isbn))
                        {
                            $_SESSION['messages'] = '<div class="success">Book Added!</div>';

                            header('Location: /');
                            exit;
                        }
                    }
                }
            }
        }
    }

Comments

[irishmann]

Добавьте спойлеров, портянку листать устанешь