Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Ошибка json - Правильность обработки (https://javascript.ru/forum/misc/78150-oshibka-json-pravilnost-obrabotki.html)

eLDeR 02.08.2019 10:30
Ошибка json - Правильность обработки
 
Добры день, не могу разобраться в чем проблема.

в теле HTML есть
<div class="col-12" id="outt">
в который выводятся последних 5 записей

Сверху страницы форма, которая добавляет через add_db.php запись в БД и формирует сразу новый запрос переводя его в формат json

Вопрос: почему-то возникает ошибка и не обрабатывает для вывода этот код ( причем json ответ идет нормальный)
{message: "Все хорошо", realty: {…}}
message: "Все хорошо"
realty: {area: Array(7), price: Array(7), address: Array(7), larea: Array(7), floor: Array(7), …}
__proto__: Object
Если ставлю в коде имя класса outt, куда мне нужно произвести вывод, то возникает ошибка.
Uncaught TypeError: Cannot read property 'area' of null
    at HTMLDivElement.<anonymous> ((index):279)
    at HTMLDivElement.<anonymous> (jquery.js?ver=1.12.4:3)
    at Function.each (jquery.js?ver=1.12.4:2)
    at a.fn.init.each (jquery.js?ver=1.12.4:2)
    at Ha (jquery.js?ver=1.12.4:3)
    at a.fn.init.append (jquery.js?ver=1.12.4:3)
    at Object.success ((index):277)
    at i (jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
    at y (jquery.js?ver=1.12.4:4)


jQuery(document).ready(function() {
    jQuery(".buttonadd").bind("click", function() {

        var name = jQuery('.nameField').val();
		var area = jQuery('.areaField').val();
        
		jQuery('.nameField').val('');
		jQuery('.areaField').val('');
				
        jQuery.ajax({
            url: "add_db.php",
            type: "POST",
            data: {name:name, area:area},
            dataType: "json",
		success: function(result) {
		if (result){ 
			jQuery('#outt div').remove();
			jQuery('#outt').append(function(){
				var res = '';
				for(var i = 0; i < result.realty.area.length; i++){

				res += '<div>' + result.realty.link[i] + ' ' + result.realty.title[i] + '</div>';
							
						}
							return res;
					});
					console.log(result);
                }else{
                    alert(result.message);
                }
				return false;
            }
        });
	return false;
    });
});

Skipp 02.08.2019 10:46
Для проверки валидности. берёте свой json из http ответа(если такой есть) и проверяете каким-нибудь онлайн сервисом, например: https://jsonformatter.curiousconcept.com/

Самый просто и быстрый способ

eLDeR 02.08.2019 11:09
Дело в том что я использую WordPress и ответ возвращается только для зарегистрированным пользователям.
Если в форму перекинуть запрос то будет Json ответ такой

{"message":"\u0412\u0441\u0435 \u0445\u043e\u0440\u043e\u0448\u043e","realty":{"a rea":["5","123","30 \u0421\u043e\u0442\u043e\u043a","8 \u0421\u043e\u0442\u043e\u043a","70","64","144"],"price":["5","123","14500000","1300000","12800000","9800000 ","2340560"],"address":["5","123","\u0411\u0430\u0440\u044b\u0431\u0438\u0 43d\u043e, \u0443\u043b. \u0410\u043a\u0430\u0434\u0435\u043c\u0438\u0447\u 0435\u0441\u043a\u0430\u044f","\u041e\u043b\u044c\ u0433\u0438\u043d\u043e","\u041b\u0443\u0433\u0430 \u043d\u0441\u043a\u0430\u044f \u0434.4","\u0421\u043e\u0440\u043d\u0435\u0447\u0 43d\u0430\u044f 4","\u041a\u043e\u043d\u043e\u0431\u0435\u0435\u04 32\u043e, \u0420\u044f\u0437\u0430\u043d\u0441\u043a\u0430\u 044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c, \u0428\u0430\u0442\u0441\u043a\u0438\u0439 \u0440\u0430\u0439\u043e\u043d"],"larea":["5","123","240","140","56","45","100"],"floor":["5","123","2","2","9","4",""],"content":["5","123","\u041a\u043e\u0442\u0442\u0435\u0434\u0 436\u00a0\u041a\u043e\u0442\u0442\u0435\u0434\u043 6\u00a0\u041a\u043e\u0442\u0442\u0435\u0434\u0436\ u00a0\u041a\u043e\u0442\u0442\u0435\u0434\u0436"," \u0423\u0447\u0430\u0441\u0442\u043e\u043a \u0441 \u0434\u043e\u043c\u043e\u043c\u00a0\u0423\u0447\u 0430\u0441\u0442\u043e\u043a \u0441 \u0434\u043e\u043c\u043e\u043c","\u041e\u043f\u043 8\u0441\u0430\u043d\u0438\u0435\u00a03\u0445 \u043a\u043e\u043c\u043d\u0430\u0442\u043d\u043e\u 0439 \u043a\u0432\u0430\u0440\u0442\u0438\u0440\u044b", "\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\ u00a02\u0445 \u043a\u043e\u043c\u043d\u0430\u0442\u043d\u043e\u 0439 \u043a\u0432\u0430\u0440\u0442\u0438\u0440\u044b", "\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0 435 \u0434\u043e\u043c\u0430"],"title":["555","123","\u041a\u043e\u0442\u0442\u0435\u0434\ u0436","\u0423\u0447\u0430\u0441\u0442\u043e\u043a \u0441 \u0434\u043e\u043c\u043e\u043c","3\u0445 \u043a\u043e\u043c\u043d\u0430\u0442\u043d\u0430\u 044f \u043a\u0432\u0430\u0440\u0442\u0438\u0440\u0430", "2\u0445 \u043a\u043e\u043c\u043d\u0430\u0442\u043d\u0430\u 044f \u043a\u0432\u0430\u0440\u0442\u0438\u0440\u0430", "\u0417\u0430\u0433\u043e\u0440\u043e\u0434\u043d\ u044b\u0439 \u0434\u043e\u043c"],"link":["https:\/\/ka4an.ru\/realty\/555\/","https:\/\/ka4an.ru\/realty\/123\/","https:\/\/ka4an.ru\/realty\/kottedzh\/","https:\/\/ka4an.ru\/realty\/uchastok-s-domom\/","https:\/\/ka4an.ru\/realty\/3x-komnatnaya-kvartira\/","https:\/\/ka4an.ru\/realty\/2x-komnatnaya-kvartira\/","https:\/\/ka4an.ru\/realty\/zagorodnyj-dom\/"]}}

eLDeR 02.08.2019 11:11
Как мне его обработать по другому ?

рони 02.08.2019 11:26
eLDeR,
success: function(result) {console.log(result); }

Цитата:
Сообщение от Skipp
если такой есть
что в result?

eLDeR 02.08.2019 12:09
В обработчике последние строчки в add_db.php вот такие:
$out = array(
	'message' => $message,
	'realty' => $realty_out
);
header('Content-Type: text/json; charset=utf-8');
echo json_encode($out);
Может быть тут и надо присвоить result переменную?

и какой командой мне проверить что сейчас передается в result ?

eLDeR 02.08.2019 12:31
Ответ [object Object]
Если оставить только
Код:
if (result){
        console.log(result);
}
То мы увидим что в консоле следующее
Код:
{message: "Не удалось записать и извлечь данные", realty: null}
{message: "Все хорошо", realty: {…}}

laimas 02.08.2019 12:43
Цитата:
Сообщение от eLDeR
Если в форму перекинуть запрос то будет Json ответ такой
{"a rea":["5","123","30 - проверить, если это не результат форматирования на форуме, то это и есть причина ошибки.

eLDeR 02.08.2019 13:24
Скрин кода
https://pickasso.info/image/001.iN53y
Ошибка, наверно, не в этом

eLDeR 02.08.2019 13:33
По логу видно что result принимает данные
Подскажите как их вывести ? может я их неправильно вывожу ?

laimas 02.08.2019 13:49
Цитата:
Сообщение от eLDeR
может я их неправильно вывожу ?
Нет ошибки в самом выводе, ошибка гласит, что нельзя прочесть свойство 'area' объекта.

Есть на форуме баг при вставке кода, не только area некорректно, но и в юникоде тоже баги. Если же все нормально с самим объектом, то проблем нет:

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div id="outt"></div>
<script>
var result = {
    "message":"\u0412\u0441\u0435 \u0445\u043e\u0440\u043e\u0448\u043e",
    "realty":{
        "area":[
            "5","123","30 \u0421\u043e\u0442\u043e\u043a","8 \u0421\u043e\u0442\u043e\u043a","70","64","144"
        ],
        "price":[
            "5","123","14500000","1300000","12800000","9800000 ","2340560"
        ],
        "address":[
            "5","123","\u0411\u0430\u0440\u044b\u0431\u0438\u043d\u043e, \u0443\u043b. \u0410\u043a\u0430\u0434\u0435\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f",
            "\u041e\u043b\u044c\u0433\u0438\u043d\u043e","\u041b\u0443\u0433\u0430 \u043d\u0441\u043a\u0430\u044f \u0434.4","\u0421\u043e\u0440\u043d\u0435\u0447\u043d\u0430\u044f 4",
            "\u041a\u043e\u043d\u043e\u0431\u0435\u0435\u0432\u043e, \u0420\u044f\u0437\u0430\u043d\u0441\u043a\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c, \u0428\u0430\u0442\u0441\u043a\u0438\u0439 \u0440\u0430\u0439\u043e\u043d"
        ],
        "larea":[
            "5","123","240","140","56","45","100"
        ],
        "floor":[
            "5","123","2","2","9","4",""
        ],
        "content":[
            "5","123","\u041a\u043e\u0442\u0442\u0435\u0434\u0436\u00a0\u041a\u043e\u0442\u0442\u0435\u0434\u0436\u00a0\u041a\u043e\u0442\u0442\u0435\u0434\u0436\u00a0\u041a\u043e\u0442\u0442\u0435\u0434\u0436",
            " \u0423\u0447\u0430\u0441\u0442\u043e\u043a \u0441 \u0434\u043e\u043c\u043e\u043c\u00a0\u0423\u0447\u0430\u0441\u0442\u043e\u043a \u0441 \u0434\u043e\u043c\u043e\u043c",
            "\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u00a03\u0445 \u043a\u043e\u043c\u043d\u0430\u0442\u043d\u043e\u0439 \u043a\u0432\u0430\u0440\u0442\u0438\u0440\u044b", 
            "\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\ u00a02\u0445 \u043a\u043e\u043c\u043d\u0430\u0442\u043d\u043e\u0439 \u043a\u0432\u0430\u0440\u0442\u0438\u0440\u044b", 
            "\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0434\u043e\u043c\u0430"
        ],"title":[
            "555","123","\u041a\u043e\u0442\u0442\u0435\u0434\u0436","\u0423\u0447\u0430\u0441\u0442\u043e\u043a \u0441 \u0434\u043e\u043c\u043e\u043c",
            "3\u0445 \u043a\u043e\u043c\u043d\u0430\u0442\u043d\u0430\u044f \u043a\u0432\u0430\u0440\u0442\u0438\u0440\u0430", 
            "2\u0445\u043a\u043e\u043c\u043d\u0430\u0442\u043d\u0430\u044f \u043a\u0432\u0430\u0440\u0442\u0438\u0440\u0430", 
            "\u0417\u0430\u0433\u043e\u0440\u043e\u0434\u043d\u044b\u0439 \u0434\u043e\u043c"
        ],"link":[
            "https:\/\/ka4an.ru\/realty\/555\/",
            "https:\/\/ka4an.ru\/realty\/123\/",
            "https:\/\/ka4an.ru\/realty\/kottedzh\/",
            "https:\/\/ka4an.ru\/realty\/uchastok-s-domom\/",
            "https:\/\/ka4an.ru\/realty\/3x-komnatnaya-kvartira\/",
            "https:\/\/ka4an.ru\/realty\/2x-komnatnaya-kvartira\/",
            "https:\/\/ka4an.ru\/realty\/zagorodnyj-dom\/"
        ]
    }
    };
jQuery('#outt').append(function() {
    var res = '';
    for(var i = 0; i < result.realty.area.length; i++) res += '<div>' + result.realty.link[i] + ' ' + result.realty.title[i] + '</div>';
    return res;
});
</script>
</body>
</html>

eLDeR 05.08.2019 09:36
Начал пошагово изучать передачу и выводить ее пошагово
сначала result
потом result.realty
и так далее... нашел, на каком этапе произошла ошибка и добавив условие в обработчик, заставил код работать.

Скажите пожалуйста, поддерживает ли передачу файла jQuery.ajax

просто делаю следующий шаг добавив в форму input с type="files"

laimas 05.08.2019 13:12
Цитата:
Сообщение от eLDeR
поддерживает ли передачу файла jQuery.ajax
Да. Для этого обязательно указать параметры:

contentType: false
processData: false

Данные формы передать можно двумя способами. Первый это непосредственно указав саму форму объекту FormData:

data: new FormData(this) - где this, это форма.

Но такая передача имеет один минус, даже если не будет выбран файл для загрузки, тем не менее на сервере массив $_FILES будет указывать на загруженный с ошибкой файл - "файл не загружен". А так как ошибки загрузки нужно обязательно проверять (проверка наличия только имени файла не дает картины полной, ибо файл может быть загружен не полностью), то возникает неоднозначность, хотя можно проверять и наличие имени для выяснения.

Второй способ, это добавлять поля формы в объект FormData его методами в цикле/непосредственно, при этом поле file добавлять только в том случае, если его свойство value равно true (не пустое, файл выбран).

eLDeR 06.08.2019 15:42
добавил 3 строчки

1.
Код:
data: new FormData(this)
было
Код:
data: {name:name, area:area, address:address, larea:larea, floor:floor, price:price, content:content, photo:photo}
2.
Код:
contentType: false
3.
Код:
processData: false
Стало просто перезагружать страницу

laimas 06.08.2019 16:31
Цитата:
Сообщение от eLDeR
добавил 3 строчки
Цитата:
Сообщение от eLDeR
Стало просто перезагружать страницу
Так надо не просто добавлять, а делать по уму. this в FormData будет формой только в том случае, если отправление формы не:
jQuery(".buttonadd").bind("click", function() {

а
jQuery("селектор формы").submit(function(e)  {
    e.preventDefault();
    jQuery.ajax({
        url: "add_db.php",
        type: "POST",
        data: new FormData(this),
        contentType: false,
        processData: false,
        dataType: "json",
        success: function(result) {
             //.....
        }
    });
});


А вы просто клеите себе то, что пишут, а что у вас в реальности бог его знает, значит надо сперва получить форму, а затем ею оперировать.


Часовой пояс GMT +3, время: 14:29.