jQuery 不能在 FF 或 IE 中运行，但在 Chrome 中运行良好答案

【问题标题】：jQuery doesn't work in FF or IE but works fine in ChromejQuery 不能在 FF 或 IE 中运行，但在 Chrome 中运行良好
【发布时间】：2014-03-06 16:42:57
【问题描述】：

我正在做一个项目，如果我使用 REST 与数据库通信，它会生成 XML 代码，下面是它的示例。

<ns2:MultipleResponse xmlns:ns2="http://v1_0.model.service.mydomain.com">
    <ns2:AttributeType>
        <ID>1</ID>
        <Version>0</Version>
        <ns2:Name>Type of Address</ns2:Name>
        <ns2:Definition>Definition for Type of Address</ns2:Definition>
        <ns2:DataType>ShortText</ns2:DataType>
        <ns2:MultipleSelect>false</ns2:MultipleSelect>
        <ns2:AttributeGroupType>
            <ID>1</ID>
            <Version>0</Version>
            <ns2:Name>Address</ns2:Name>
            <ns2:Code>ADR</ns2:Code>
            <ns2:Definition>Definition of Address</ns2:Definition>
        </ns2:AttributeGroupType>
    </ns2:AttributeType>
</ns2:MultipleResponse>

我从 Spring MVC 中的 Web GUI 调用我的 REST。

我使用 jQuery 从另一个选择下拉列表的选择中填充一个选择下拉列表。这适用于 Chrome，但不适用于 FF 或 IE。我在 FF 中使用 Firebug，它给了我这个错误：

没有找到带有选择器的元素：“AttributeType”

我的 jquery：

<script type="text/javascript">
$(document).ready(function() {
    var html = '<option value>Välj</option>';
    $('#serviceTypeAttributeGroup').change(function() {
        $.ajax({
            url: "http://server/project-web/services/rest/auth/v1_0/attributetypes/servicetypeattributegroup/" + $('#serviceTypeAttributeGroup').val(),
            type: "GET",
            contentType: 'application/xml; charset=utf-8',
            dataType: "xml",
            success: function(data) {
                $(data).find("AttributeType").each(function() {
                    html = '';
                    var $attribute = $(this);
                    var id = $attribute.children("ID:first").text();
                    var name = $attribute.find("Name:first").text();
                    html += '<option value="' + id + '">' + name + '</option>';
                    $('#attributeType').html(html);
                });
            }
        });
        return false;
    });
    $('#attributeType').html(html);
});

我已尝试将“AttributeType”更改为“ns2:AttributeType”、“ns2\\:AttributeType”和“ns2\:AttributeType”，但这不会更改 FF 中的错误消息，并且代码在 Chrome 中停止工作。

当我查看 FF 中的 XML 时，它只显示纯文本，是否有帮助？在 Chrome 中，我看到了所有标签。

我的选择下拉菜单：

<tr>
    <th><label for="serviceTypeAttributeGroup"><s:message code="servicetypeattributegroup" />:</label></th>
    <td><sf:select path="serviceTypeAttributeGroup.ID" id="serviceTypeAttributeGroup">
        <sf:option value="0">&nbsp;</sf:option>
        <sf:options items="${listOfAttributeGroups}" itemLabel="attributeGroupType.name" itemValue="ID" />
    </sf:select></td>
</tr>
<tr>
    <th><label for="attributeType"><s:message code="attributetype" />:</label></th>
    <td><sf:select path="attributeType.ID" id="attributeType">
        <sf:option value="0">&nbsp;</sf:option>
    </sf:select></td>
</tr>

有没有人知道哪里出了问题？以及我如何纠正它？

【问题讨论】：

您声明在 Firefox 中看不到任何标签。如果是这样，那么我开始怀疑数据根本没有作为 XML 传输，因此问题甚至可能源自服务器端而不是 javascript。我会在服务器端进行一些日志记录，以查看从 chrome 发送的请求和从 Firefox 发送的请求是什么样子的；也许那里有一个重要的区别可能是一个线索。
没错，但今天我看到了树形结构，只是一个警告“此 XML 文件似乎没有任何与之关联的样式信息。”但我会检查以防万一。

标签： java jquery rest spring-mvc

【解决方案1】：

你应该尝试像这样逃避它：

$(data).find("ns2\\:AttributeType")

【讨论】：

我试过了，现在我看到上面的帖子中的 \ 之一消失了。我现在编辑了它。

【解决方案2】：

很可能是这条线导致了问题

url: "http://server/project-web/services/rest/auth/v1_0/attributetypes/servicetypeattributegroup/" + $('#serviceTypeAttributeGroup').val(),

您应该尝试使用相对路径，而不是向服务器提供竞争路径。否则一些浏览器会因为同源策略

而被屏蔽

【讨论】：

如果在同一个域中应该没问题。
@Alvaro 如果他在 https 中浏览，就会出现问题。对吗？
我不确定。
@Alvaro 你可以参考这个链接stackoverflow.com/questions/9449627/…
抱歉没有帮助。我仍然在 Firebug 中收到相同的错误消息。

【解决方案3】：

我把我的 jQuery 改成了

<script type="text/javascript">
    $(document).ready(function() {
        var html = '';
        $('#serviceTypeAttributeGroup').change(function() {
            html = '';
            $.ajax({
                url: '<c:url value="/mvc/serviceTypeAttribute/attributeTypes" />',
                type: "GET",
                data: "id=" + $('#serviceTypeAttributeGroup').val(),
                dataType: 'json',
                success: function(response) {
                    $(jQuery.parseJSON(JSON.stringify(response))).each(function() {
                        html += '<option value="' + this.id + '">' + this.name + '</option>';
                        $('#attributeType').html(html);
                    });
                }
            });
            $('#attributeType').html(html);
        });
        return false;
    });
</script>

并在我的控制器中创建了一个方法，现在它可以在 Chrome 和 FF 中运行。

感谢您的意见！

【讨论】：