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

Question

[LyciferZla]

JS

$.ajax({
		            method: "POST",
		            url: "/server.php",
		            data: {
		                user: user, 
		                title: title
		            },
		            success: function(msg){$('div.AddCoreResult').html(msg);}
		        });

PHP
echo "<h1 class='SystemGood'>Успешно</h1>";

Как аяксом получить с сервера "<h1 class='SystemGood'>Успешно</h1>" и вывести на страницу в случае успешного запроса?

факт в том что сейчас он почему то загружает всю страницу в блок div.AddCoreResult
хотя в этот блок <div class="AddCoreResult"></div> нужно вывести всего лишь <h1 class='SystemGood'>Успешно</h1> а не всю страницу

Answer 1

[Gor Mkhitaryan]

Вообще, правильным форматом общения JS и Php является JSON. Вам лучше написать что нибудь типа echo json_encode(['msg' => 'Успешно']);

А на стороне js просто

$.ajax({
                method: "POST",
                url: "/server.php",
                data: {
                    user: user, 
                    title: title
                },
                success: function(msg){$('div.AddCoreResult').html("<h1 class='SystemGood'>"+msg.msg+"</h1>");}
            });

Также не забудьте в php файле указать заголовок Content-type: application/json

Comments

[LyciferZla]

а допустим сделать так можно?

json_encode(['msg' => '<h1 class='SystemGood'>Успешно</h1>']);

- результат будет ожидаемым?

[LyciferZla]

"Также не забудьте в php файле указать заголовок Content-type: application/json" - либо сделать так - contentType: 'application/json; charset=utf-8', в аякс верно?)

[Gor Mkhitaryan]

В принципе, так можно сделать, но лучше делать правильно. API не должен возвращать HTML, он должен вернуть ответ который JS уже форматирует так как ему нужно.

Если я вас правильно понял, вы хотите в зависимости от того что вернет сервер, возвращать ошибку либо сообщение "Успешно". Это лучше делать на стороне клиента, php возвращает например msg= "Ошибка", code=400 (в json_encode) либо msg="Успешно", code=200.

В зависимости от кода ответа вы уже можете выводить либо сообщение об ошибке либо сообщение об успехе

[Gor Mkhitaryan]

LyciferZla, нет, таким способом вы укажете заголовок запроса, а вам надо указать заголовок ответа. Делается это методом header() в php.

[LyciferZla]

Gor Mkhitaryan, есть возможность показать скромный пример как это правильно сделать?

[Gor Mkhitaryan]

LyciferZla, header('Content-type: application/json')

[LyciferZla]

Gor Mkhitaryan, если я верно понял

echo json_encode(['msg' => 'Успешно']);
header('Content-type: application/json');

верно?

[Gor Mkhitaryan]

LyciferZla, наоборот, заголовок перед echo поставьте.

[LyciferZla]

Gor Mkhitaryan,

echo json_encode(['msg' => 'Успешно', 'code' => '200']);

так же правильно пишется?)

[Gor Mkhitaryan]

LyciferZla, да

[LyciferZla]

Gor Mkhitaryan, и вот в этих моментах тож хотел уточнить - function(msg, code){}, получаем в JS code.code и msg.msg

[LyciferZla]

LyciferZla, тоже в JS условие if (code.code == 200) {} просто вообще не выводит и хочу найти ошибку почему)

[Gor Mkhitaryan]

Не, msg в себе содержит и msg и code

msg.code и msg.msg

[Gor Mkhitaryan]

Оставьте просто function (msg)

[LyciferZla]

Gor Mkhitaryan, при console.log(msg.code) выходит такой вот результат

[Gor Mkhitaryan]

LyciferZla, скиньте код, также покажиье что выведет console.log(msg)

[LyciferZla]

Gor Mkhitaryan, Сорри то что так долго не появлялся, пк прост подломался

PHP

if(isset($data['click'])) {
//
	$errors = array();
	
	if((trim($data['title']) == '') || (mb_strlen($data['title'],'UTF-8') < 10) )
	{ $errors = json_encode(['msg' => "Заголовок слишком короткий", 'code' => '400']);}

	if(trim($data['user']) == '')
	{ $errors = json_encode(['msg' => "0x000010_UNKNOWN", 'code' => '400']);}

	if ($user['energy'] <= $data['price']) 
	{ $errors = json_encode(['msg' => "Недостаточно энергии", 'code' => '400']);}

	// if( $data['url'] == !preg_match('/[^0-9a-z-_A-Z:/.]/is', $data['url']) )
	// { $errors[] = 'Некорректный URL';	}

	if (isset($data['editSetting'])) {
		R::exec("UPDATE `serfing` SET `title` = '$data[title]', `url` = '$data[url]', `price` = '$data[price]' WHERE `id` = '$data[editSetting]'");
		echo json_encode(['message' => "Успешно", 'code' => '200']);
	} elseif(!isset($data['editSetting'])){

		if( empty($errors)) {
			R::exec("UPDATE `users` SET `energy` = `energy` - '$data[price]' WHERE `id` = '$data[user]'");

			$serfing = R::dispense('serfing');
			$serfing->user = $data['user']; 											# Пользователь
			$serfing->title = $data['title']; 											# Заголовок
			$serfing->url = $data['url']; 												# URL Адрес
			$serfing->price = $data['price']; 											# Прайс
			$serfing->views = '1000'; 													# Всего просмотров
			$serfing->residue = '0'; 													# Просмотрено
			$serfing->balance = $data['price']; 										# Баланс серфинга
			$serfing->work = 'Запущено'; 												# Статус работы
			R::store($serfing);

			echo json_encode(['message' => "Успешно", 'code' => '200']);

		} else {echo $errors;}
	}
}

JS

$('div#addSerf').on('click', function(){
    $(document).ready(function(){
        var user = $('label#info').attr('data-id');
        var title = $('input#title').val();
        var editSetting = $('.editSettingSave').attr('data-id');
        var url = $('input#url').val();
        var price = $('span#priceCore').attr('data-price');
        var click = $('div#addSerf').attr('id');
	    if(title.length < 5) {
	    	var classA = document.getElementById("title").classList; 
	    	classA.add('errorInput'); 

	    	if(title.length >= 1) {$('div.AddCoreResult').html("<h1 class='SystemError'>Заголовок слишком короткий</h1>");}
	    	if(title.length < 1) {$('input#title').attr('placeholder', 'Это очень важно :(');}
	    } else { 
	    	var classA = document.getElementById("title").classList;
	    	classA.remove('errorInput');

	    	if ((url == 'https://') || (url == 'http://') || (url.length < 13)) {
	    		var classB = document.getElementById("url").classList; 
	    		classB.add('errorInput');
	    		$('div.AddCoreResult').html("<h1 class='SystemError'>Некорректный URL</h1>");
	    	} else {
	    		var classB = document.getElementById("url").classList;
	    		classB.remove('errorInput');

	    		$.ajax({
		            method: "POST",
		            url: "/add",
		            data: {
		                user: user, 
		                title: title,
		                url: url,
		                price: price,
		                click: click,
		                editSetting: editSetting,
		            },
		            error: function(data) {
		            	$('div.AddCoreResult').html("<h1 class='SystemError'>Ошибка сети</h1>");
		            },
		            success: function(data){
		            	console.log(data.code);
		            	if(data.code == 400){ $('div.AddCoreResult').html("<h1 class='SystemError'>"+data.message+"</h1>"); } 
		            	if(data.code == 200){
		            		$('div.AddCoreResult').html("<h1 class='SystemGood'>"+data.message+"</h1>");
		                	$('div.AddCoreRight').load(document.URL + ' div#AddSerf');
		                	$("input#title").val(''); $('input#url').val('https://');
		                	setTimeout(function(){$('h1.SystemGood').hide(1500); setTimeout(function(){ $('h1.SystemGood').remove();}, 1500);}, 3500);
		            	}
		            }
		        });
	    	}
	    }
    }); 
});

HTML

<div class="SerfingPlatform">
			<div class="SerfingCards SCBlue">
				<div class="SerfingCardsInfo">
					<div class="SerfingCardsInfoImage">
						<img src="https://www.google.com/s2/favicons?domain=<?=$serfing['url']?>">
					</div>
					<div class="SerfingCardsInfoText">
						<h1><?=$serfing['title']?></h1>
						<h3>Время: <?=$time?> сек.</h3>
					</div>
					<div class="SerfingCardsInfoSubMenu">
						<img src="core/img/submenu.svg">
					</div>
				</div>
				<div class="SerfingCardsBottom">
					<div class="SerfingCardsButton" data-url='<?=$serfing['url']?>' onclick="getContent()">
						<span><?=$listing?><img src="core/img/flash.svg"> </span> Выполнить
					</div>
				</div>
			</div>
		</div>

[LyciferZla]

Gor Mkhitaryan, а вот что в консоле выдает, даю в укороченном формате:

<div class="ProfileMenuLink ">Выход</div>
					</div></a>
							</div>
		</div>
				{"msg":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0439","code":"400"} 	<div class="ProfileContent">
 		<div class="Informer">
 			<div class="InformerNameBox">
 				<p>Кабинет пользователя</p>
 				<h1>Добавление и управление сёрфингом</h1>
 			</div>
 			<div class="InformerVizits">
 				<i class="far fa-user"></i>
 				<div class="InformerVizitsBox"><a href="profile"><h1> Профиль </h1></a></div>/
 				<div class="InformerVizitsBox"><a href="serfing"><h1> Серфинг </h1></a></div>/
 				<div class="InformerVizitsBox"><a href="add"><h1>Размещение</h1></a></div>
 			</div>
 		</div>

[wisgest]

<img src="https://www.google.com/s2/favicons?domain=<?=$serfing['url']?>">

LyciferZla, вместо www.google.com/s2/favicons лучше s2.googleusercontent.com/s2/favicons — не устанавливаются куки Google (сравните HTTP-заголовки ответов), значки при первом способе получения не загружаются при приватном просмотре в Firefox.