JavaScript Prüfung auf Sonderzeichen und anschl. ersetzen Dieser!

Dsimon24 · 7. April 2017

Guten Morgen zusammen,

ich programmiere derzeit viel über PHP, hab mit JS aber noch so meine Probleme - leider.
Deshalb bräuchte ich mal einen Tipp von euch, wie ich mein Vorhaben realisieren könnte.

Mit folgendem JS-Code wird ein Text-Area in einer DB gespeichert:

Code:

<script type="text/javascript">
	$(document).ready(function()
	{
		$(".edit_int").click(function()
		{
		var ID = $(this).attr('id');
		}).change(function()
		{
		var ID = $(this).attr('id');
		var IID = document.getElementById("iid").value;
		var data=$("#"+ID).val();
		var dataString = 'id=' + IID + '&field=' + ID + '&value=' + data;

		$.ajax({
		type: "POST",
		url: "autosave_interview.php",
		data: dataString,
		cache: false,
		success: function(html)
		{
			alert("Interview wurde gespeichert!");
		},
		error: function(data)
		{
			alert("Es ist ein Fehler aufgetreten!");
		}
		});
		});
	});
</script>

So. Jetzt möchte ich gerne realisieren, dass das Interview vor der Speicherung (diese erfolgt dann im PHP-Script
'autosave_interview.php') auf Sonderzeichen - genau genommen auf &-Zeichen und +-Zeichen geprüft wird,
und diese ersetzt werden. Wie kann ich dies am besten realisieren?

VG, David

Yuuri · 7. April 2017

Sieh dir die Doku an und zieh dann korrekte Schlüsse.

http://api.jquery.com/jquery.ajax/ schrieb:
data
Type: PlainObject or String or Array
Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below).

Folgerichtig: Übergib ein Objekt mit den Feldern, jQuery kümmert sich dann automatisch um das korrekte Escaping. Dein Suchen/Ersetzen geht definitiv irgendwann in die Hose.

Dsimon24 · 7. April 2017

Yuuri schrieb:
Dein Suchen/Ersetzen geht definitiv irgendwann in die Hose.

Warum sollte es definitiv irgendwann in die Hose gehen?

boula · 7. April 2017

Ein Array per Ajax zu übergeben macht auf jeden Fall mehr Sinn.

Dennoch:

Code:

    // template: mein string
    // search: & oder + zeichen
    // rawData[key]: neues zeichen
    while(template.indexOf(search) >= 0)
      template = template.replace(search, rawData[key]);

bog · 7. April 2017

Dsimon24 schrieb:
Warum sollte es definitiv irgendwann in die Hose gehen?

ich denke yuuris einwand bezieht sich darauf, dass du hier manuell ein parameterset nach application/x-www-form-urlencoded zusammenbaust. das problem hierbei ist, dass dieser mime type zum inhalt (grob) nur alphanumerische zeichen sowie '&' und '=' beinhalten darf. alles was in die non-alnum kategorie faellt, wird durch percent-encoding dargestellt. du willst nur & und + ersetzen, in wirklichkeit gibt es aber deutlich mehr situationen, wo dir ein benutzer einen stock in die speichen schmeissen kann, daher ueberlaesst man das am besten der funktionalitaet einer library (oder wie hier im endeffekt der js engine der browser), die fuer sehr viele faelle quasi-erschoepfend getestet wurde.

Dsimon24 · 7. April 2017

Im Grunde genommen, geht es mir quasi um folgendes:

Ich habe eine Textarea. Dieser Inhalt soll per AJAX an ein PHP-Script übergeben werden.

Code:

<html>
  <head>
    <script type="text/javascript" src="../bootstrap/js/jquery-1.11.3-jquery.min.js"></script> 
  </head>
  
  <body>
    
    <input type="hidden" value="1" id="iid" />

    <div role="tabpanel" class="tab-pane active" id="int1">
        <textarea class="test_int" style="width: 100%;" id="test_interview_1" name="test_interview" cols="10" rows="10"></textarea> 
    </div>    

    <script type="text/javascript">
      $(document).ready(function()
      {
        $(".test_int").click(function()
        {
        var ID = $(this).attr('id');
        }).change(function()
        {
        var ID = $(this).attr('id');
        var IID = document.getElementById("iid").value;
        var data=$("#"+ID).val();
        var dataString = 'id=' + IID + '&field=' + ID + '&value=' + data;

        $.ajax({
        type: "POST",
        url: "3_serverscript.php",
        data: dataString,
        cache: false,
        success: function(html)
        {
          alert("Test-Interview wurde gespeichert!");
        },
        error: function(data)
        {
          alert("Es ist ein Fehler aufgetreten!");
        }
        });
        });
      });
    </script>    
    
  </body>
</html>

Der Inhalt des Areabox befindet sich in der Variablen $value.
Arbeite ich mit dem Inhalt der Variablen im übergebenen
Script weiter, so erhalte ich folgende Probleme:

Ist ein &-Zeichen vorhanden, wird alles ab da abgeschnitten.
Ist ein +-Zeichen vorhanden, wird dies einfach entfernt.

Das ist meine Problematik.
Vielleicht ergibt sich hier eine andere Lösungsmöglichkeit,
um die Sonderzeichen darzustellen, oder ggf. auch zu ersetzen?

Wie gesagt sind meine JS-Kenntnisse leider noch ein wenig mau.

Yuuri · 7. April 2017

Ich hab dir die Lösung genannt, bog hat das Problem ausführlich erklärt. Woran hapert es jetzt? Übergib statt einen String bei data ein Objekt und das Problem ist umschifft. Ein Beispiel steht unten bei Examples in der Doku.

Dsimon24 · 7. April 2017

Ich finde gerade keine Lösung, den String in ein Objekt zu hinterlegen. Der String hat
in etwa bis zu 250 Wörter. Kann man das denn dann so einfach in ein Objekt packen?
Sorry, wenn ich so doof frage, aber das ist für mich noch Neuland und ich versuche es
gerade auf die Schnelle zu lernen um meine Programmierung fortsetzen zu können.

Yuuri · 7. April 2017

Anstatt data wie bei dir mit einem String zu übergeben, übergibst du einfach ein Objekt mit den nötigen Keys.

Aus

Code:

$(document).ready(function()
{
	$(".test_int").click(function()
	{
	var ID = $(this).attr('id');
	}).change(function()
	{
	var ID = $(this).attr('id');
	var IID = document.getElementById("iid").value;
	var data=$("#"+ID).val();
	var dataString = 'id=' + IID + '&field=' + ID + '&value=' + data;

	$.ajax({
	type: "POST",
	url: "3_serverscript.php",
	data: dataString,
	cache: false,
	success: function(html)
	{
		alert("Test-Interview wurde gespeichert!");
	},
	error: function(data)
	{
		alert("Es ist ein Fehler aufgetreten!");
	}
	});
	});
});

wird

Code:

$(document).ready(function()
{
	$(".test_int").click(function()
	{
	var ID = $(this).attr('id');
	}).change(function()
	{
	var ID = $(this).attr('id');
	var IID = document.getElementById("iid").value;
	var data=$("#"+ID).val();

	$.ajax({
	type: "POST",
	url: "3_serverscript.php",
	data: {
		id: IID,
		field: ID,
		value: data
	},
	cache: false,
	success: function(html)
	{
		alert("Test-Interview wurde gespeichert!");
	},
	error: function(data)
	{
		alert("Es ist ein Fehler aufgetreten!");
	}
	});
	});
});

bog · 7. April 2017

Dsimon24 schrieb:
Ist ein &-Zeichen vorhanden, wird alles ab da abgeschnitten.
Ist ein +-Zeichen vorhanden, wird dies einfach entfernt.

Wie gesagt sind meine JS-Kenntnisse leider noch ein wenig mau.

das problem ist hier weniger JS-kenntnis, sondern encoding-kenntnisse.

wie ich im vorigen post erwaehnte baust du einen string auf, der auf eine gewisse weise kodiert ist. dabei handelt sich's um "application/x-www-form-urlencoded", in dem schluessel/wert-paare im folgenden format uebergeben werden:

variable1=wert1&variable2=wert2&...

wie du siehst sind '&' und '=' hier funktionale zeichen und es waere fuer einen parser eines solchen strings schwer, festzustellen, ob ein '=' in einem wert ein echtes '=' ist, oder eine erneute zuweisung (=> fehler?) stattfindet. deshalb kodiert man die zugewiesenen werte im "percent-", auch bekannt als "url encoding". dabei werden zeichen, die nicht alphanumerisch sind oder in eine sehr kleine menge an nicht-alnum zeichen fallen, durch prozentzeichen+code ausgedrueckt. sehr bekannt ist z.b. "%20" als leerzeichen.

wenn du nun ein '&' in diesen string reinschiebst denkt der parser auf der serverseite, die wertzuweisung fuer deine variable sei beendet. deshalb verschwindet ihr wert nach diesem kaufmannsund.

zusaetzlich zum "%20" ist i url encoding weiterhin das plus '+' als leerzeichen definiert. deshalb "verschwindet" das bei dir (wird durch ein leerzeichen ersetzt).

wenn du yuuris letztes beispiel befolgst, baust du deine uebergebenen daten in zeilen 15-19 abstrakt in einem objekt zusammen (wobei du dann kein manuelles encoding vornehmen musst), und jquery uebernimmt dann die aufgabe des konvertierens in application/x-www-form-urlencoded.

Dsimon24 · 7. April 2017

Ach so ist das gemeint. Vielen Dank, jetzt funktioniert alles bestens!

Suche

JavaScript Prüfung auf Sonderzeichen und anschl. ersetzen Dieser!

Dsimon24

Lieutenant

Yuuri

Fleet Admiral

Dsimon24

Lieutenant

boula

Cadet 4th Year

bog

Ensign

Dsimon24

Lieutenant

Yuuri

Fleet Admiral

Dsimon24

Lieutenant

Yuuri

Fleet Admiral

bog

Ensign

Dsimon24

Lieutenant

Ähnliche Themen