解析html ajax结果并将其数据值与dom进行比较答案

【问题标题】：Parsing html ajax result and comparison its data value to dom解析html ajax结果并将其数据值与dom进行比较
【发布时间】：2018-10-24 02:42:59
【问题描述】：

我有一个对动作方法的 ajax 调用，该方法返回带有 CarViewModel 的局部视图。

它返回一个格式如下的响应：

Honda
Lovely Car

Forde
Comfortable Car

.cshtml

<h3 data-car-id="@Model.Id">@Model.CarTitle</h3>
<p>@Model.CarDescription</p>

阿贾克斯

success: function (data) {
    $("div").append(result);
}

在将结果附加到 DOM 之前，我需要检查 data-car-id 的值，如果 dom 中存在具有相同值的 data-car-id，我想将该特定汽车附加到不同的唯一的数据汽车 ID。

我正在努力解决这个问题，因为数据会同时返回多辆汽车。我想我需要以某种方式将 html 中的每辆车解析为自己的变量？

使用完整的 Ajax 更新

   $.ajax({
                url: '/Home/GetData/',
                type: "GET",
                success: function (data) {
                    if (data == null) {

                    } else {
                        $(".div").append("<div class='cars'>" + data + </div>");
                    }
                }
            });

【问题讨论】：

您可以在问题中发布您的完整 AJAX 请求吗？
是的，对不起！两秒@MasterYoda
当您说需要检查 data-car-id 的值时，您是说需要将该值作为参数作为 POST 请求传递吗？还是您的意思是要检查返回的特定值的结果？
我想检查为特定值返回的结果。例如，当所有汽车都已完全循环并插入数据时。然后数据包含一个 html 文件，其中包含多辆汽车的汽车标题和汽车描述。然后我想用汽车标题获取数据属性的值，然后在将汽车附加到 dom 之前进行某种 dom 检查 - 这本身意味着我必须解析各种汽车
虽然您可以尝试从 html 中提取数据，但返回 JSON 响应而不是完整的 html 不是更容易吗？这将减少带宽并允许更轻松的数据访问。

标签： javascript jquery .net model-view-controller

【解决方案1】：

var out_cars=[];
var total_cars=$('.cars').find('h3').length;
for (var i = 0; i < total_cars; i++) {
	 var car_name=$('.cars').find('h3').eq(i).text();
	 var car_id=$('.cars').find('h3').eq(i).attr('data-car-id');
	 var car_desc=$('.cars').find('h3').eq(i).next().text();
	 out_cars.push({'car_name':car_name, 'car_id': car_id, 'car_desc':car_desc});
}

/* Further with the received object it is possible to do everything that you want */

console.log(out_cars);

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

<!--  After adding the information your div ('.cars')will look like this:  -->


<div class="cars">
   <h3 data-car-id="01">Honda</h3>
   <p>Lovely Car</p>

   <h3 data-car-id="02">Forde</h3>
   <p>Comfortable Car</p>
</div>

【讨论】：