jQuery .ajax .load .get x(h)tml related error (“mismatched tag, expected: ”)

问题

My problem is actually simple, but nevertheless I need someone with in-depth-knowledge here. Imagine the following simple task: Load / parse some external html data into an element of a current html file.

Let's say, this is the content of the external file, that we want to retrieve:

<div id="element">
  <img src="test.jpg"><br>
  lorem ipsum
</div>

And this is the code using jQuery .load

$("#div_in_mother_html").load("external.html #element");

Works like charme.
But looking in the console, I see the following ERRORS:

1. mismatched tag. Expected: <br />
2. mismatched tag. Expected: <img />

Why is that?

Well, pretty obviously, .load is a shorthand for .ajax in jquery, which is, as far as I understand, a cross-browser XMLHttpRequest. This may cause mismatched tag problemss, for HTML-tags do not close, unlike XHTML:

HTML - <img src="test.jpg"><br>
XHTML - <img src="test.jpg" /><br />

Next try

Alright I say, it must be possible to parse not XML but HTML. And yes, the documentation of jQuery says so, too. I switch from .load to the more advanced .ajax and tried setting the data-type manually:

$.ajax({ type:'GET', url:'ajax.txt', contentType: "text/plain; charset=utf-8", 
 dataType:'text', success:function(data){ 
    $('#div_in_mother_html').html(data); } 
});

And again, it works...but the same silent errors show up in the console.

error seen in firefox 32 browser console in local environment.

回答1:

My guess would be that when you request it when working from the filesystem, it is for some reason parsing it as xml. You really shouldn't ever test ajax from the filesystem anyway since the filesystem will never return all the same headers that you would get from a real server. Fix would be to setup a local webserver running on localhost.

来源：https://stackoverflow.com/questions/25085305/jquery-ajax-load-get-xhtml-related-error-mismatched-tag-expected-br

标签

jquery