打印 AJAX 响应数据（来自错误返回）

Question

我有一个 AJAX 请求脚本，无论出于何种原因，它都会返回数据，但也认为响应是错误的。我已经联系了 API 的创建者，他们正在对其进行调查，但目前我正在尝试为响应创建一个解决方法。

这是我的脚本：

 <script type="text/javascript">
        $(document).on('click', '#pullDetails', function() {
             $.ajax({
                type:'GET',
                url: 'https://webservices.rrts.com/TrackWebApi/api/values/'+$('input[name=proNumber]').val(),
                success: function(data) {
                    $('.errorTitle').addClass('hidden');
                    $('.errorContent').addClass('hidden');

                    $('#carrierReturnData').removeClass('hidden');
                    $('#carrierReturnData').html(Shipment.Origin.Name);
                },
                error: function(request, status, error) {
                    console.log(request);
                    console.log(status);
                    console.log(error);
                    $('#openInvoicesOverlay').html('');
                    $('#openInvoicesOverlay').removeClass('overlay');
                    $('#freightBillDetails .box-body').html(data.SearchResults[0].SearchItem);
                }
            });
        });
</script>

现在，成功部分不起作用，即使数据已成功返回到我的 GET 请求。因此，“错误：函数...”在哪里工作（即使不应该）。

所以根据这个返回JSON：

如何打印详细信息？与返回的 SearchItem 字段一样。该脚本确实适用于 .html 和 .remove 类，但错误的 .html 部分：函数不起作用，这可能是因为我试图打印出响应数据。

响应更新

用新的响应更新

失败

对象 { 详细信息："{\"SearchResults\":[{\"SearchItem\":\"****\",\"DisplayType\":0,\"Shipment\":{\"DRAvail \":false,\"ProNumber\":\"****\",\"PickupNumber\":\"未找到\",\"CustomerNumber\":\"****\",\" BillToAccount\":\"****\",\"BillToNumber\":null,\"BOLNumber\":\"\",\"BOLReceived\":true,\"PODReceived\":false,\" PONumber\":\"见下文\",\"OrderNumber\":null,\"OperationalStatus\":null,\"Status\":null,\"InspectionAvailable\":false,\"ProDateTime\":\ "2018-02-13T00:00:00\",\"DeliverDateTime\":\"0001-01-01T00:00:00\",\"SpecInst1\":\"RESIDENTIAL DELY CFA 1\",\" SpecInst2\":\"LIFTGATE DELY REQUIRED\",\"SpecInst3\":\"ANY ??'S CALL:CUST SERV\",\"TotalAmount\":\"145.38\",\"Scac\": \"COEP\",\"ReadyTimeString\":\"\",\"件数\":1,\"重量\":381,\"ApptDateTime\":\"0001-01-01T00:00:00 \",\"DeliveredDateTime\":\"0001-01-01T00:00:00\",\"ProjectedDeliveryDateTime\":\"2018-02-19T00:00:00\",\"HAWB\":null ,\"Origin\":{\"Name\":\"ATLAS INTL\",\"Address1\":\"400 W WARNER AVE\",\"Address2\":\"\",\"City \":\"圣安娜\",\"州\":\"CA\",\"邮政编码\":\"92707\"},\"收货人\":{\"姓名\":\"LEANNE FRANKE\",\" Address1\":\"783 HUNTINGTON DR\",\"Address2\":\"\",\"City\":\"HIGHLANDS RANCHO\",\"State\":\"CO\",\" PostalCode\":\"80126\"},\"PickupStop\":null,\"OriginTerminal\":{\"TerminalName\":\"Commerce\"],\"AuthUser\":{\"CanViewBOL\ ":false,\"CanViewInvoice\":false,\"CanViewInspection\":false,\"CanViewPOD\":true,\"CanViewWI\":false,\"FBAUserID\":\"\",\"SharedSecret \":\"\",\"UserAuthenticated\":false,\"WebUser\":{\"Site\":null},\"AccountGroup\":{\"GroupCode\":null,\"MasterAccountCollection \":null},\"PermissionMask\":0,\"ManualAccount\":false}}" }

更新

Answer 1

你的 ajax 是成功的，因为它返回 json 而不是 ajax 错误响应，但是你的语法不正确。

 success: function(data) {
$('#carrierReturnData').html(Shipment.Origin.Name);
},

货件未定义。

你需要的是获取成功回调的返回，即data。

这意味着data == 屏幕截图中的 JSON

 success: function(data) {
$('#carrierReturnData').html(data['SearchResults'][0]['Shipment']['Origin']['Name']);
},

更新：

您的数据是跨域的，您需要使用jsonp 而不是json。但是因为你需要知道回调在哪里首先（需要等待站长回答），所以改为强制做ajax跨域。我真的很喜欢这种方式。

index.html

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
 $(function() {
         $.ajax({
            type:'POST',
            url: 'http://localhost/process.php',
            data: {num: $('input[name=proNumber]').val()},
            dataType: 'json',
            success: function(data) {
                if(data.SearchResults != undefined) console.log('success');
                else console.log('failed');
                console.log(data);
            },
            error: function(data) {
                console.log('error');
                console.log(data);
            }
        });
    });

</script>

进程.php

<?php
$json = file_get_contents('https://webservices.rrts.com/TrackWebApi/api/values/'.$_POST['num']); //or you can use curl
echo $json;
?>

更新 2：

我将您的 json 复制到 json 托管服务。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="carrierReturnData" ></div>
<script>
$(function(){
	$.ajax({
		url: 'https://api.jsonbin.io/b/5a8ede2aa671850974694f16/2',
		type: 'GET', 
		dataType: 'json',
		success: function(data) {
			/*
				result: 
ignore this->	AuthUser: Object { ManualAccount: false, PermissionMask: 0, UserAuthenticated: false, … }
your JSON->	details: Array [ {…} ]
ignore this->	__proto__: Object { … }

So we need to do below
			*/
			if(data.details.SearchResults != undefined) {
				console.log('success');
				console.log(data.details.SearchResults[0].Shipment.Origin.Name); //result: ATLAS INTL
				$('#carrierReturnData').html(data.details.SearchResults[0].Shipment.Origin.Name);
			}else{
				console.log('failed');
				console.log(data);
			}
			
		},
		error: function(data) {
			console.log('error');
			console.log(data);
		}
	});
	
})
</script>

jsonbin.io 已启用 CORS，但您的目标网站不允许 CORS，因此我们需要使用我上面提到的 PHP（curl 或 file_get_contents）来破解它。