Schickt man in seiner Webapplikation Formulardaten mit AJAX zum Server, dann kann man b\u00f6se \u00dcberraschungen erleben, insbesondere wenn man meistens mit dem Firefox arbeitet und nur gelegentlich mit dem IE testet.<\/p>\n
W\u00e4hrend der Firefox mit UTF-8 pr\u00e4chtig zurechtkommt, muss man beim IE schon mit dem Zweih\u00e4nder dahinter, um seine \u00e4s, \u00f6s und \u00fcs irgendwie auf den Server zu bekommen. Das Problem besteht \u00fcbrigens nicht nur mit AJAX, auch mit GET verschickte Formulare scheinen bei gewissen IE-Versionen und Encodings zu Datenschrott zu f\u00fchren.<\/p>\n
Mit JQuery und UTF-8 w\u00e4hnt man sich auf der sicheren Seite, doch das ist leider nur die halbe Wahrheit.<\/p>\n
Unsere Versuchsanordnung ist denkbar einfach: Eine Webseite mit Zeichensatz UTF-8, ein Formular mit einem Text-Eingabefeld und einem Submit-Button:<\/p>\n
<%@ page contentType=\"text\/html;charset=UTF-8<\/strong>\" %>\r\n...\r\n<form method=\"POST\" action=\"remoteHtmlAjaxsearch\">\r\n <input type=\"text\" id=\"ajaxsearch\" \/><\/strong><br \/>\r\n <input type=\"submit\" value=\"Suchen\" id=\"btnSubmit\"\/>\r\n<\/form><\/pre>\nEin Klick auf den Button schickt den eingegebenen Wert mit AJAX zum Server.\u00a0 Die Remote-Methode macht nichts anderes, als den \u00fcbergebenen Wert mit einem <p>-Tag zu ummanteln und als HTML zur\u00fcckschicken. Hier die serverseitige Funktion – nat\u00fcrlich Grails, what else?<\/p>\n
def remoteHtmlAjaxsearch = {\r\n def html = \"\"\r\n if (params.ajaxsearch) {\r\n html = \"<p>$params.ajaxsearch<\/p>\"\r\n }\r\n render html\r\n}<\/pre>\nWenn man bei JQuery zur einfachsten AJAX-Variante greift, n\u00e4mlich JQuery.get, dann ist alles in Butter. Verwendet habe ich \u00fcbrigens Version 1.3.2.<\/strong> Die folgende Variante funktioniert sowohl im IE wie im Firefox:<\/p>\n
$('#btnSubmit').click(function() {\r\n var ajaxsearchIn = $('#ajaxsearch').attr('value');\r\n $.get<\/strong>(\"remoteHtmlAjaxsearch\", {ajaxsearch: ajaxsearchIn}, function(data){\r\n $(\"#content\").html(data);\r\n });\r\n return false;\r\n});<\/pre>\nDiese Methode ist allerdings etwas beschr\u00e4nkt. Wenn man mehr M\u00f6glichkeiten ben\u00f6tigt, dann gibt es $.ajax.<\/strong> Der folgende Code macht allerdings im IE aus den Umlauten Hackfleisch:<\/p>\n
$('#btnSubmit').click(function() {\r\n var ajaxsearchIn = $('#ajaxsearch').attr('value');\r\n\r\n $.ajax({\r\n url: \"remoteHtmlAjaxsearch\", data: \"ajaxsearch=\" + ajaxsearchIn,\r\n success: function(html){\r\n $(\"#content\").html(html);\r\n }\r\n });\r\n return false;\r\n});<\/pre>\nNur wenn man diesen Code noch mit einem $.ajaxSetup erg\u00e4nzt und dabei die Daten mit POST abschickt, dann klappt es mit allen Zeichen:<\/p>\n
$('#btnSubmit').click(function() {\r\n var ajaxsearchIn = $('#ajaxsearch').attr('value');\r\n\r\n $.ajaxSetup({\r\n contentType: \"application\/x-www-form-urlencoded;charset=utf-8<\/span><\/strong>\",\r\n type: \"POST\"<\/strong>\r\n });\r\n<\/span>\r\n $.ajax({\r\n url: \"remoteHtmlAjaxsearch\", data: \"ajaxsearch=\" + ajaxsearchIn,\r\n success: function(html){\r\n $(\"#content\").html(html);\r\n }\r\n });\r\n return false;\r\n});<\/pre>\nDas Interessante ist, dass die Anwendung von type und contentType innerhalb von $.ajax nicht dasselbe Ergebnis brachte!<\/p>\n","protected":false},"excerpt":{"rendered":"
Schickt man in seiner Webapplikation Formulardaten mit AJAX zum Server, dann kann man b\u00f6se \u00dcberraschungen erleben, insbesondere wenn man meistens mit dem Firefox arbeitet und nur gelegentlich mit dem IE testet.<\/p>\n
W\u00e4hrend der Firefox mit UTF-8 pr\u00e4chtig zurechtkommt, muss man beim IE schon mit dem Zweih\u00e4nder dahinter, um seine \u00e4s, \u00f6s und \u00fcs irgendwie auf […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[34,35,3],"tags":[30,39,42,28,40,41],"_links":{"self":[{"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/119"}],"collection":[{"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=119"}],"version-history":[{"count":10,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/119\/revisions"}],"predecessor-version":[{"id":127,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/119\/revisions\/127"}],"wp:attachment":[{"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}