Ajax

Question

我正在使用 Ajax 到 post 到 .Net MVC 控制器。它 returns HTML 显示在页面的某个部分。我需要做的是以某种方式确定 HTML 是否包含 class 名称，以便我可以使用它来更新网页的另一部分。

这是我的 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();
    }

它returns以下之一BootstrapHTML.

@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" class。然后，我可以根据找到的 CSS class 名称，使用 "Success" 或 "Fail" 等文本更新页面另一部分的消息。

我看到了 jQuery.parseHTML() 但我不确定从那里如何处理它以确定 HTML 是否包含其中一个 class 文件。

更新 JSON

尝试使用 JSON 但出现错误。如果我能让它起作用，我认为最终这是查看它是否有效而不是寻找 css class 的最佳方式。

var json = $.parseJSON(response);

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

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

Answer 1

我认为您可以轻松地使用 Javascript 来搜索 CSS class。喜欢response.indexOf('NameOfClass') > -1。我希望它有意义。

Answer 2

如果您正在使用 jQuery，您可能会发现 hasClass() 有帮助。

.hasClass( className )
Determine whether any of the matched elements are assigned the given class.

下面，我将响应转换为 jQuery object，然后测试该对象的 class 个名称。

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 的 indexOf() might be useful, as mentioned in the 。

The indexOf() method returns the index within the calling String object of the first occurrence of the specified value, starting the search at fromIndex. Returns -1 if the value is not found.

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 3

假设alert div是响应的根元素，下面的isSuccess和isDanger将return一个布尔值。

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( selector )
Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments. http://api.jquery.com/is/

Ajax - 如何检查 CSS class 返回的 HTML？

Ajax - how to check returned HTML for CSS class?

asp.net-mvc

jquery

asp.net-ajax