Ajax - как проверить возвращенный HTML для класса CSS?

Question

Я использую Ajax для публикации на контроллере .Net MVC.Возвращает HTML для отображения в разделе страницы.Что мне нужно сделать, так это каким-то образом определить, содержит ли HTML имя класса, чтобы я мог использовать его для обновления другого раздела веб-страницы.

Это мой Ajax-вызов.

 $.ajax({
    type: "POST",
    url: url,
    data: data,
    success: function (response) {
        $("#validation-remarks").html(response);
        $("#updateMessage").html(response);

        console.log(response);

        var html = $.parseHTML(response);
        //somehow check the HTML for a value

        $("#divLoading").hide();
    }

Возвращает один из следующих вариантов начальной загрузки HTML.

@if (Model.IsSuccessful)
{
    <div class="alert alert-dismissible alert-success">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        @Model.UpdateMessage
    </div>
}
else
{
    <div class="alert alert-dismissible alert-danger">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong>@Model.UpdateMessage</strong> 

        <div class="pt-2">
            @Html.Raw(Model.ValidationMessage)
        </div>
    </div>
}

Что я хотел бы сделать, это посмотреть, еслиВозвращаемый HTML-код содержит класс «alert-success» или «alert-danger».Затем я могу обновить сообщение в другой части страницы текстом, например «Успех» или «Ошибка», в зависимости от имени класса CSS, которое я нахожу.

Я видел jQuery.parseHTML (), но я не уверен, что с ним делать, чтобы определить, содержит ли HTML один из этих файлов классов.

UPATE WITH JSON

Попытка с использованием JSON, но с ошибкой.Если я смогу заставить это работать, я думаю, что в конечном итоге это лучший способ проверить, является ли он действительным по сравнению с поиском класса CSS.

var json = $.parseJSON(response);

alert("json value: " + json.IsValid);

if (json.IsValid === false) {
    alert("Valid is false");
}

Answer 1

Если вы используете jQuery, вы можете найти hasClass() полезным.

.hasClass (className)
Определите, есть ли какие-либо изсопоставленным элементам назначается данный класс.

Ниже я преобразовываю ответ в jQuery-объект , а затем проверяю этот объект на наличие имен классов.

var responses = [
  `<div class="alert alert-dismissible alert-success">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    @Model.UpdateMessage
  </div>`,
  `<div class="alert alert-dismissible alert-danger">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>@Model.UpdateMessage</strong> 
    <div class="pt-2">
      @Html.Raw(Model.ValidationMessage)
    </div>
  </div>`,
  `<div class="alert alert-dismissible alert-something-else">
  </div>`
];

var $output = $('#output');

$.each(responses, function(k, response) {

  var $html = $(response);

  if ($html.hasClass('alert-success')) {
    $output.append('<p>' + k + ') Contains Success</p>');
  } else if ($html.hasClass('alert-danger')) {
    $output.append('<p>' + k + ') Contains Danger</p>');
  } else {
    $output.append('<p>' + k + ') Contains Neither</p>');
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="output"></div>

---

Если вы не используете jQuery, JavaScript 10 * *indexOf() может быть полезным, как указано в ответе from @ TehseenJohnson .

Метод indexOf () возвращает индекс в вызывающем объекте String первого вхождения указанного значения, начиная поиск с fromIndex.Возвращает -1, если значение не найдено.

var responses = [
  `<div class="alert alert-dismissible alert-success">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    @Model.UpdateMessage
  </div>`,
  `<div class="alert alert-dismissible alert-danger">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>@Model.UpdateMessage</strong> 
    <div class="pt-2">
      @Html.Raw(Model.ValidationMessage)
    </div>
  </div>`,
  `<div class="alert alert-dismissible alert-something-else">
  </div>`
];

var output = document.getElementById('output');

responses.forEach(function(response, k) {

  var elm = document.createElement('p');

  if (response.indexOf('alert-success') > -1) {
    var content = document.createTextNode(k + ') Contains Success');
  } else if (response.indexOf('alert-danger') > -1) {
    var content = document.createTextNode(k + ') Contains Danger');
  } else {
    var content = document.createTextNode(k + ') Contains Neither');
  }

  elm.appendChild(content);
  output.appendChild(elm);

});

<div id="output"></div>

Answer 2

При условии, что alert div является корневым элементом ответа, isSuccess и isDanger ниже вернут логическое значение.

var html = $.parseHTML(response);
//test for '.alert-success'
var isSuccess = $( html ).is('.alert-success');
//test for '.alert-danger'
var isDanger = html.is('.alert-danger');

.is (селектор)
Проверить текущий сопоставленный набор элементов по объекту селектора, элемента или jQuery и вернуть true, если хотя бы один из этих элементов соответствует заданным аргументам.http://api.jquery.com/is/

Answer 3

Я думаю, вы можете легко использовать Javascript для поиска этого класса CSS.Как response.indexOf('NameOfClass') > -1.Я надеюсь, что это имеет смысл.