ib0123456789
@ib0123456789
Просто Null

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

Есть такой
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 настолько плохо , что не смог объяснить свой вопрос гуглу , но надеюсь вы поймете ))
  • Вопрос задан
  • 87 просмотров
Решения вопроса 1
irishmann
@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']);
	}
});

Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@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;
                        }
                    }
                }
            }
        }
    }
Ответ написан
Ваш ответ на вопрос

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

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