SyntaxError: Unexpected token s in JSON at position 0?
Hallo liebe Gutefragler,
Ich möchte eine Auktions-Web-App erstellen und normalerweise fügen Sie die Auktionen über ein Formular hinzu. Wenn ich das Formular korrekt ausfülle und dann auf die Schaltfläche Auktion erstellen klicke, erhalte ich eine Fehlermeldung. Normalerweise sollte man keine bekommen und man sollte die Auktionen in einer Tabelle in einer index.html bekommen.
Hier ist mein Code:
$(document).ready(function() {
$("#create").click(function() {
var data = {
seller: $("#email").val(),
name: $("#item").val(),
html: $("#desc").val(),
minimum_price: $("#str").val(),
buyout_price: $("#buyout").val(),
created_on: Date.now(),
duration: $("#dur").val()
}
$.ajax({
type: 'POST',
url: "http://localhost:9000/auction",
data: data,
dataType: "json",
contentType: "application/json",
error: function() {
alert('An error occurred while creating the new auction');
},
success: function(data) {
$('form :input').val('');
alert("Good");
}
});
});
});
Mein Localhost sagt:
SyntaxError: Unexpected token s in JSON at position 0
Wo ist mein Fehler? Danke im Voraus!
2 Antworten
Verwende entweder die stringify-Methode auf das data-Objekt oder gestalte das data-Objekt als korrektes JSON:
var data = {
"seller": $("#email").val(),
"name": $("#item").val(),
"html": $("#desc").val(),
"minimum_price": $("#str").val(),
"buyout_price": $("#buyout").val(),
"created_on": Date.now(),
"duration": $("#dur").val()
}
Die Namen der Properties werden in Anführungszeichen gesetzt.
Ob die konkreten Daten valid sind, kann ich im Moment nicht sagen, das solltest du noch prüfen. Ein JSON Validator kann dir dabei helfen (z.B. dieser).
{"seller":"hudhasdh@web.de","name":"uhsdjk","html":"ashudjasd asjdasd","minimum_price":"15","buyout_price":"111","created_on":1575234241713,"duration":"3 hrs"}
Erhalte noch immer diese selbe Fehlermeldung. Und die Ausgabe habe ich erhalten.
SyntaxError: Unexpected token s in JSON at position 0
Nimm mal den Parameter
dataType: "json",
aus deinem Ajax-Request heraus. Mir scheint dein serverseitiges Skript liefert auf die Anfrage hin gar kein JSON zurück - somit kann die Antwort (was auch immer es ist) nicht korrekt als JSON geparst werden.
Danke fuer deine Antwort! Leider bekomme ich dieselbe Meldung
Request URL: http://localhost:9000/auction
Request Method: POST
Status Code: 400 Bad Request
Remote Address: [::1]:9000
Referrer Policy: no-referrer-when-downgrade
Das ist was auf dem Netzwerktab steht.
Und die Console gibt die Fehlermeldung zurück
Ich sollte zu dem
var data = {
"seller": $("#email").val(),
"name": $("#item").val(),
"html": $("#desc").val(),
"minimum_price": $("#str").val(),
"buyout_price": $("#buyout").val(),
"created_on": Date.now(),
"duration": $("#dur").val()
}
noch
"state" : "offered"
weil man das nicht aus der Form nimmt, sondern soll einfach hinzugefügt werden, wenn man die neuen Auktionen definiert/kreiiert
<form action="index.html">
<div class="form-group">
<label for="email">Seller</label>
<input type="email" class="form-control" id="email" placeholder="Your email">
</div>
<div class="form-group">
<label for="item">Item</label>
<input type="text" class="form-control" id="item" placeholder="Short Name">
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea rows="5" class="form-control" id="desc"></textarea>
</div>
<div class="form-group">
<label for="starting_price">Starting Price</label>
<input type="number" class="form-control" id="str" placeholder="€">
</div>
<div class="form-group">
<label for="buyout_price">Buyout Price</label>
<input type="number" class="form-control" id="buyout" placeholder="€">
</div>
<div class="form-group">
<label for="duration">Duration</label>
<select class="form-control" id="dur">
<option>3 hrs</option>
<option>6 hrs</option>
<option>12 hrs</option>
<option>1 day</option>
<option>2 days</option>
<option>3 days</option>
</select>
</div>
<button type="submit" method="post" class="btn btn-primary" id="create" onclick="addItem()">Create
Auction</button>
</form>
Ich habe eine Form, die ich so erstelle. Dann mach ich Inputs in der Form (in der index.html) und dann müssen diese Inputs entsprechend zu einer Tabelle hinzugefügt werden. Ich habe das ausgedacht, leider funktioniert es nicht
for (var i = 0; i < data.length; i++) {
$("#table").append('<tr><td>' + data[i].id + '</td><td>' +
data[i].name + '</td><td>' + data[i].duration + ' min by ' +
data[i].seller + '</td><td><button type="button" class="btn btn-primary"> Bid for ' +
data[i].minimum_price + '€</button><br><button type="button"class="btn btn-outline-dark"> Buy for ' +
data[i].buyout_price + '€</button></td></tr><tr><td></td><td colspan="3">' + data[i].html + '</td></tr>');
}
Irgendwie bist du jetzt nicht auf meine Fragen eingegangen und so verstehe ich kaum noch, um was es geht.
Das neue Key-Value-Paar kannst du einfach in dem Objekt anhängen.
var data = {
// ...
"duration": $("#dur").val(),
"state": "offered"
};
Wenn der Wert des neuen Properties von woanders kommt, musst du den mit jQuery vorher noch heranziehen. Er kann vielleicht durch einen extra AJAX-Request herangezogen oder in einem data-Attribut irgendwo auf der Seite von der Serveranwendung gerendert werden.
PHP-Pseudo-Beispiel:
<span id="state" data-state="<?= getState() ?>"></span>
<!-- some other markup ... -->
<script>
let state = $("#state").attr("data-state");
// your post request ...
</script>
Soweit sind das nun alles nur noch Mutmaßungen.
Danke fuer die Antwort! Leider funktioniert es immer noch nicht. mit deinem Code Habe die JSON Datei ueberprueft und sie ist eine gueltige Datei.