ajax jquery отправка данных и уведомления

отправляю форму ajax
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }

function FormClick () {
  event.preventDefault()
    var str = $("#say").serialize();
    $.ajax({
      url: "function/say.php",
      type: "POST",
      data: str,
      timeout: 3000,
      target: "#say",
      beforeSend: function(){
      $("#res").html("Отправляю ...");
      },
      success: function(data){
      $("#res").html(data);
      },
      error: function(xhr, status){
      $("#error").html("<span>" + status + "</span>");
      }
     
  });
}
 

есть 2 блока
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }

<div id="error"></div>
<div id="res"></div>
 

По моей задумки, если форма заполнена правильно, то выводится уведомление в блоке #res(Успешно), если заполнена с ошибками то в блоке #error выводится уведомление об ошибке (Ошибка при заполнении).

В данном случаи все выводитcя в блоке #res
0
ajax javascript jquery

1 ответов

Дело в том, что данные ошибки, которые вы хотите передать в блок #error, не являются ошибками HTTP, на которые реагирует функция error(). Она реагирует на такие ошибки, как 404 (Not found), 500 (Internal server error) и другие ошибки сервера (4xx: Client Error (ошибка клиента) и 5xx: Server Error (ошибка сервера)). Вы можете убедится в этом, заменив свойство url на какую-нибудь несуществующую страницу.

В данном случае ваш скрипт всё успешно отрабатывает, валидирует данные и отдает код 200 (OK) вместе с ответом, что отправленные формой данные не устраивают его по каким-то параметрам. Анализируйте текст ответа (я предпочитаю отдавать сервером json), например так:


function FormClick () {
  event.preventDefault()
    var str = $("#say").serialize();
    $.ajax({
      url: "function/say.php",
      type: "POST",
      data: str,
      dataType: 'json' // перестраховка :)
      timeout: 3000,
      target: "#say",
      beforeSend: function(){
      $("#res").html("Отправляю ...");
      },
      success: function(data){
       if (data.status=='error') {
         $("#error").html(data.text); // если сервер, например, отдает строку "{'status':'error', 'text':'Недопустимое значение в поле e-mail'}"
         $("#res").html('Ошибка при заполнении формы');
       }
       else {
         $("#res").html(data.text); // в случае отсутствия ошибок
         $("#error").empty();
      },
      error: function(xhr, status){
      $("#error").html("<span>" + status + "</span>");
      }
     
  });
}
 
3

Обработка ошибок происходит в success-функции. Возвращайте не хтмл, а json. Проверка будет примерно такой:


success: function(response){
      if(response.error) {
          $("#error").html("<span>" + response.error_text + "</span>");
      }
      else {
          $("#res").html(response.data);
      }
 

Соответственно response должен иметь вид:

{error: true/false, data: 'html', error_text: 'error'}
 

Для этого в php есть функция json_encode
Естественно в опциях $.ajax следует указать

dataType: 'json'
 
1

Честно говоря не понял, как работать json.

На данный момент при нажатии на кнопку выводит только parsererror

ajax


<script type="text/javascript">
function FormClick () {
  event.preventDefault()
    var str = $("#say").serialize();
    $.ajax({
      url: "function/say.php",
      type: "POST",
      data: str,
      dataType: 'json',
      timeout: 3000,
      target: "#say",
      beforeSend: function(){
      $("#res").html("Отправляю ...");
      },
      success: function(response){
      if(response.error) {
        $("#error").html("<span>" + response.error_text + "</span>");
        }
        else {
          $("#res").html(response.data);
        }
      },
      error: function(xhr, status){
      $("#res").html("<span>" + status + "</span>");
      }
     
  });
}
</script>
 

мой php

<?php
session_start();
$er = array();
if (strlen($_POST['name'])<2) {
  $er[] = "Укажите имя...........";
}
if (!preg_match ("/^[a-zA-Z0-9_\.\-][a-zA-Z0-9_\.\-]+@[a-zA-Z0-9_\.\-]+\.[a-zA-Z]+/is",$_POST['mail'])) {
  $er[] = "Правильно заполните E-mail...........";
}
if (!isset($_POST['price'])) {
  $er[] = "Укажите мнение о ценах магазина";
}
if (!isset($_POST['assortiment'])) {
  $er[] = "Укажите ....";
}
if (!isset($_POST['search_good'])) {
  $er[] = "Укажите......";
}
if (strlen($_POST['message'])<=5) {
  $er[] = "Слишком короткий........";
}

if (count($er) > 0) {
  foreach ($er as $value) {
    echo "<span style='color:red'>".$value."</span>
";
  }
  exit;
}
else {
 
  $message = '<p>'.$_POST['name'].' '.$_POST['mail'].'
</p>';
  $message .= $_POST['message'];
  $headers = "From:".$_POST['name']." <".$_POST['mail'].">\r\n";
  $headers .= "Content-type: text/html; charset=utf-8\r\n";
  if (mail ("test@test.ru", "Оставил отзыв", $message,$headers)) {
    unset ($_SESSION['hash']);
    unset ($_SESSION['id_user']);
    session_destroy ();
    echo "<span style='color:green; font-size:18px; font-weight:700'>Спасибо</span>


";
   }
  else {
    echo "<span style='color:red'>Извините произошла ошибка.</span>";
  }
}
?>
 

Как изменить php

Приношу извинения, но Javascipt для меня темный лес
0

<script type="text/javascript">
function FormClick () {
  event.preventDefault()
    var str = $("#say").serialize();
    $.ajax({
      url: "function/say.php",
      type: "POST",
      data: str,
      dataType: 'json',
      timeout: 3000,
      target: "#say",
      beforeSend: function(){
      $("#res").html("Отправляю ...");
      },
      success: function(data){
      if (data.status=='error') {
       $("#error").html(data.text);
      }
      else {
       $("#res").html(data.text);
      }
      },
      error: function(xhr, status){
      $("#error").html("<span>" + status + "</span>");
      }
     
  });
}
</script>
 
0