Обновление двух блоков AJAX

#php #javascript #ajax #post

Здравствуйте, совсем недавно начал использовать ajax...

Можно ли как-то изменить содержимое нескольких элементов dom-дерева, отталкиваясь
от полученного ответа сервера?

Есть блок, в котором отображаются успешные вернувшиеся ответы. Он называется #refresh.

Есть блок, в котором отображается название ошибки, если ответ вернулся с ошибкой.
Он называется #error

Этим кодом отправляю и получаю результат

$("body").on("click","#add_sql",function(){
  var msg=$('#AddProduct').serialize(); 
  $.ajax({
    type:'POST',
    url:"/php/1.php",
    data:msg+"&producti=productie",
    cache:false,
    success:function(data){
      var obj=jQuery.parseJSON(data); // Получаем ответ в json
      if (obj.code=="200") { // Если код ответа 100
        $("#refresh").html(data); // Отобразим содержимое в #refresh
      }
      else if (obj.code=="100") { // Если код ошибки 100
        $("#error").html(obj.text); // Отобразим текст ошибки в #error
      }
    },
    error:function() {
      $("#error").html("Ошибка сети"); // Если у пользователя нет сети -- вернём ошибку.
    }
  });
});


Обработчик: 

if(isset($_POST["producti"])){
    if($_POST["producti"]=="productie"){

    $e1=null;

    $name=htmlspecialchars($_POST['name']);
    $name=strip_tags($name);
        if(mb_strlen($name,"utf-8")<=0) {
        $e1.="1";
        $err.= 'Заполните поле "Наименование';
    }
    $count=htmlspecialchars($_POST['count']);
    $count=strip_tags($count);
        if(mb_strlen($count,"utf-8")<=0) {
        $e1.="2";
        $err.= 'Заполните поле "Колличество';
    }

if($e1==null){
    $jsonRes='true';
    $jsonCode='200'; // Код успешного ответа
    $jsonMessage='Good respo..';
    $text='Товар был успешно добавлен'; // Следует заменить на свой текст или содержимое.
} else
    $jsonRes='false';
    $jsonCode='100'; // код ошибочного ответа
    $jsonMessage='Error message';
    $text=$err; // Заменить на своё содержимое
}}


$array = array('result'=>$jsonRes,'code'=>$jsonCode,'message'=>$jsonMessage,'text'=>$text);
// Соберём ответ
echo json_encode($array); // вернём json ответ

    

Ответы

Ответ 1

Для этого страница /php/operation.php должна возвращать не только содержимое ответа
для отображения, но и код ответа/ошибки, по которому можно отслеживать: возвращается
ли ошибка либо нужный результат.

Допустим, на /php/operation.php проверяется только наличие передаваемых данных:

$value=$_POST['data'];

// проверим наличие передаваемых данных
if ($value) {
  $jsonRes='true';
  $jsonCode='200'; // Код успешного ответа
  $jsonMessage='Good respo..';
  $text='Содержимое товара, для отображения на странице в #refresh'; // Следует заменить
на свой текст или содержимое.
}
// Если параметры не переданы - вернём ошибку
else {
  $jsonRes='false';
  $jsonCode='100'; // код ошибочного ответа
  $jsonMessage='Error message';
  $text='Текст с ошибкой, который отобразится в #error'; // Заменить на своё содержимое
}

$array = array('result'=>$jsonRes,'code'=>$jsonCode,'message'=>$jsonMessage,'text'=>$text);
// Соберём ответ
echo json_encode($array); // вернём json ответ


Теперь, имея код ошибки - можно манипулировать ответом:

function productClick(){
  var msg=$('#AddProduct').serialize(); 
  $.ajax({
    type:'POST',
    url:"/php/operation.php",
    data:msg+"&producti=productie",
    cache:false,
    success:function(data){
      var obj=jQuery.parseJSON(data); // Получаем ответ в json
      if (obj.code=="200") { // Если код ответа 200
        $("#refresh").html(data); // Отобразим содержимое в #refresh
      }
      else if (obj.code=="100") { // Если код ошибки 100
        $("#error").html(obj.text); // Отобразим текст ошибки в #error
      }
    },
    error:function() {
      $("#error").html("Ошибка сети"); // Если у пользователя нет сети -- вернём ошибку.
    }
  });
}


Ответ 2

Оказалось всё проще чем я думал, сделал примерно так
вот ajax код:

 function add_p(){
        var msg=$('#AddProduct').serialize(); 
        $.ajax({
            type:'POST',
            url:"/php/1.php",
            data:msg,
            cache:false,
            success:function(data){ 
            var a=data.split('~');  // Разрезаю полученный ответ до знака ~
   if(a[0]=='error_r'){$(".error_r").html(a[1]);}; // Проверяю какой блок обновить
и вставляю в него всё что после знака ~
   if(a[0]=='refresh'){$(".refresh").html(a[1]); $(".error_r").html('
Успешно
добавлено
');}; // Тоже самое, но еще вывожу сообщение в блок с ошибками, что выполнено
успешно
            }
        });
    };


На php я вывожу текст добавляя в начала класс блока что бы проверить к чему это относится
к ошибке или нет. К примеру:

echo 'error_r~Вы оставили поле с названием пустым, заполните его';