Wie sende ich Variablen von JavaScript nach Flask via jQuery?

Hallo,

ich bin in JavaScript/jQuery und auch Python/Flask noch ein ziemlicher Anfänger. Ich versuche gerade, einfach nur ein JSON-Objekt aus JavaScript in einem HTML-Template mit Flask anzuzeigen.

Hier mein Code:

Flask:

from flask import Flask,request, render_template

app = Flask(__name__)

@app.route("/")
def rofl():
  return render_template("test.html")

@app.route("/test", methods=['POST'])
def test():
  Namensliste = request.get_json(True)
  print(Namensliste)
  return render_template("rofl.html", Namensliste=Namensliste)

if __name__ == '__main__':
  app.run(port=5200)

test.html:

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form action="#" method="post">
    <button type="button" onclick="JSONTest()"> Send UserInfo</button>
  </form>
</body>

rofl.html:

<head>
  <meta charset="UTF-8">
  <title>Titel</title>
</head>
<body>
  NamensListe: {{Namensliste}}
</body>

JavaScript-Datei:

var myJason = {
  "name1" : "Jens",
  "name2" : "Josef",
  "name3" : "Johannes"
}

function JSONTest() {
  var MyJason= JSON.stringify(myJason);
  console.log(MyJason)
  $.ajax({
    type: 'POST',
    url: '/test',
    data: MyJason,
    success: function(data) {
      console.log(data, "Rückmeldung1");
  }});
}

Wie mein Code eigentlich funktionieren soll ist: Ich rufe die Route "/" auf, drücke auf den Button: "JSONTest()" und meine Funktion sendet via jQuery mein JSON-Objekt an "/test". Dort wird das Objekt in Namensliste gespeichert und rofl.html mit der Namensliste darin aufgerufen.

Ich weiß, dass hier wahrscheinlich viele Grundlagenfehler drin sind, aber ich habe wirklich ewig lang gegooglet und finde einfach nicht, wie man es richtig macht.

Danke schon einmal für jede Idee.

Computer, Technik, HTML, programmieren, JavaScript, Informatik, JQuery, Python, Flask
HTML / JS: Wie kann ich mehrere Sachen aus dem localStorage ausgeben?

Hallo,

ich habe vor, eine Benutzerverwaltungssoftware zu programmieren. Jedoch bin ich auf ein Problem gestoßen.

Bei der unteren Artikelnummer kann man eine Art Schlüssel eingeben, welcher aber nicht gleich wie die Artikelnummer sein muss.

z.b. so..

Wenn man dann auf Suchen klickt und die Artikelnummer 01 eingibt, sollte es mir alles ausgeben. Das heißt, die Artikelnummer, Beschreibung, den Lagerplatz, usw..

Das habe ich bis jetzt alles:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <title>Alle Artikel</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <td>Artikel Nr.</td>
        <td>Beschreibung</td>
        <td>Lagerplatz</td>
        <td>Bestand</td>
        <td>Preis</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>
          <input id="Artikel" value="" type="text" />
        </th>
        <th>
          <input id="Beschreibung" value="" type="text" />
        </th>
        <th>
          <input id="Lagerplatz" value="" type="text" />
        </th>
        <th>
          <input id="Bestand" value="" type="text" />
        </th>
        <th>
          <input id="Preis" value="" type="text" />
        </th>
      </tr>
    </tbody>
  </table>
  Artikel Nr.: <input id="Schlüssel" value="" type="text" />
  <input type="button" value="speichern" onclick="speichern()" />
  <input type="button" value="Artikel suchen" onclick="suche()" />
</body>
</html>
<script>
  function speichern() {
    var Schlüssel = document.getElementById('Schlüssel').value;
    var Artikel = document.getElementById('Artikel').value;
    var Beschreibung = document.getElementById('Beschreibung').value;
    var Lagerplatz = document.getElementById('Lagerplatz').value;
    var Bestand = document.getElementById('Bestand').value;
    var Preis = document.getElementById('Preis').value;

    window.localStorage.setItem(Schlüssel, Artikel, Beschreibung, Lagerplatz, Bestand, Preis);
  }

  function suche() {
    var Schlüssel = document.getElementById('Schlüssel').value;
    document.getElementById('Artikel').value = window.localStorage.getItem(Schlüssel);
  }
</script>

Ich danke für eure Hilfe.

Gruß

Bild zum Beitrag
Computer, HTML, JavaScript
Javascript geht nicht in einem von XMLHttpRequest geladenen Div?

Hallo ich versuche gerade mit XMLHttpRequest einen Div auf meiner Webseite zu aktuallisieren soweit geht das auch nur wenn ich versuche in der datei die geladen werden soll etwas mit Javascript auszuführen wird dies nicht getan. Ich habe aber überprüft das die datei geladen wird. Das was ich in JS geschrieben habe wird auch in den Div geladen nur nicht ausgeführt..
Hier meine Datei die den Div läd:

  <script language="javascript" type="text/javascript">
    function getData() {
      var xhr = new XMLHttpRequest();                 // Create XMLHttpRequest object
    
      xhr.onload = function() {                       // When response has loaded
        // The following conditional check will not work locally - only on a server
        if(xhr.status === 200) {                       // If server status was ok
          document.getElementById('load').innerHTML = xhr.responseText; // Update
        }
      };
      
      xhr.open('GET', 'sql/load.php', true);        // Prepare the request
      xhr.send();                                 // Send the request
    }
    
    setInterval(getData, 1000);
</script>

<div id='load'></div> 

Hier meine Load.php

<?php
session_start();
require_once "config.php";
require_once "link_user.php";
        //Check new messages
        $test = "false";
        $sql = "SELECT * FROM msg WHERE touser='$user_name' AND readmsg='$test' LIMIT 1";
        $query = mysqli_query($db_link, $sql) or die (mysqli_error());
        $num = mysqli_num_rows($query);
        while ($row = mysqli_fetch_array($query)) {
            $chat_id = $row["chat_id"];

        }
        if($num == 1){
            
echo "<script>
var notification = new Notification('Notification title', {
    icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
    body: 'Hey there! You\'ve been notified!',
   });</script>
";
        }
?>
Computer, HTML, programmieren, JavaScript, PHP
Html/CSS/Javascript Website Bild wird nicht angezeigt?

Hi, will dass das erste Bild direkt angezeigt wird und das der Beispieltext rechts steht. Wegen Zeichen kurz gehalten. Danke!

<div class="mySlides" id="expandedImg">
<img src="bilder/schuh.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/schönschuh.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/mann.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/lederschuh.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/basketball.jpg" style="width:35%">
</div>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="bilder/schuh.jpg" style="width:90%" onclick="currentSlide(1)" alt=""></div>
<div class="column">
<img class="demo cursor" src="bilder/schönschuh.jpg" style="width:90%" onclick="currentSlide(2)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="bilder/mann.jpg" style="width:90%" onclick="currentSlide(3)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="bilder/lederschuh.jpg" style="width:90%" onclick="currentSlide(4)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="bilder/basketball.jpg" style="width:90%" onclick="currentSlide(5)" alt="">
</div>
</div>
</div> 
<div class="text">
<a>Beispieltext</a>
<p>Beispieltext...</p>
</div>
* {box-sizing: border-box;}
.container {
position: relative;
margin-top: 80px;
}
.mySlides {
display: none;
margin-bottom: -45px;
margin-top: 65px;
margin-left: 10px;}
.cursor {cursor: pointer;}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 300px;
width: auto;
padding: 16px;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;}
.next {
right: 0;border-radius: 3px 0 0 3px;} 
.prev:hover,
.next:hover {background-color: rgba(211, 211, 211, 0.8);}
.caption-container {text-align: center; background-color: rgb(255, 255, 255);color: white;}
.row:after {content: ""; display: table; clear: both;}
.column {float: left; width: 7%;}    
.demo {opacity: 0.6;}
.active,
.demo:hover {opacity: 1;}
.row {margin-top: 65px; margin-left: 10px;}
.text {display: flex; justify-content: flex-end; width: 40%;}
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;}
Computer, HTML, programmieren, CSS, JavaScript
Was ist hier genau das Problem (Programmieren = p5.js)?

Ich habe ein Problem mit dem programmieren, da angeblich p5js sagt: There's an error due to \"keyIsDown\" not being defined in the current scope (on line 36 in jspg?

Ich habe mal meinen Code hineinkopiert und hoffe, dass jemand hier mir helfen kann. (Ist ein Projekt für die Schule).

Ich würde gerne das Programm, wie es hier steht, ohne Probleme es zum laufen zu bringen.

let v;

let b;

let n;

let m;

let vGeschwindigkeit;

let bGeschwindigkeit;

let nGeschwindigkeit;

let mGeschwindigkeit;

function setup() {

createCanvas(310, 400);

background('lightgray');

v = -200;

b = -200;

n = -200;

m = -200;

vGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen

bGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen

nGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen

mGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen

}

function draw() {

background(240); // Löscht Bild

rect(10, v, 65, 100);

fill('black');

rect(85, b, 65, 100);

fill('black');

rect(160, n, 65, 100);

fill('black');

rect(235, m, 65, 100);

fill('white');

circle(mouseX, mouseY, 10); // Mauszeigerkreis

fill('black');

}

if (keyIsDown(82)) { //taste r -> Spiel neu

setup();

}

if (mouseIsPressed) {

  rgbFarbwerte = get(mouseX, mouseY);

  if (rgbFarbwerte[0] > 0) {

  v = -200;

  b = -200;

  n = -200;

  m = -200; //Falls man den Hintergrund drückt, dann soll das Spiel nochmal von Anfang an wieder starten.

  }

}

if (mouseIsPressed) {

if (10 < mouseX && mouseX < 75 &&

v < mouseY && mouseY < v + 100) {

v = -200; //Taste 1 geht in die Ausgangslage

vGeschwindigkeit = random(6); //ändert Geschwindigkeit nochmal

}

}

if (mouseIsPressed) {

if (85 < mouseX && mouseX < 150 &&

b < mouseY && mouseY < b + 100) {

b = -200; //Taste 2 geht in die Ausgangslage

bGeschwindigkeit = random(6); //ändert Geschwindigkeit nochmal

}

}

if (mouseIsPressed) {

if (160 < mouseX && mouseX < 225 &&

n < mouseY && mouseY < n + 100) {

n = -200; //Taste 1 geht in die Ausgangslage

nGeschwindigkeit = random(6); //ändert Geschwindigkeit nochmal

}

}

if (mouseIsPressed) {

if (235 < mouseX && mouseX < 310 &&

m < mouseY && mouseY < m + 100) {

m = -200; //Taste 1 geht in die Ausgangslage

nGeschwindigkeit = random(6); //ändert Geschwindigkeit nochmal

}

}

v = v + vGeschwindigkeit;

if (v > height) {

v = -100;

vGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen für Taste 1

}

b = b + bGeschwindigkeit;

if (b > height) {

b = -100;

bGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen für Taste 2

}

n = n + nGeschwindigkeit;

if (n > height) {

n = -100;

nGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen für Taste 3

}

m = m + mGeschwindigkeit;

if (m > height) {

m = -100;

mGeschwindigkeit = random(6); // Eine Zufallszahl zuordnen für Taste 4

}

PC, Computer, programmieren, JavaScript, Informatik, Programmiersprache
Einfaches JavaScript-Spiel per Tastendruck neu starten?

Wir hatten in der Schule den Auftrag ein einfaches JavaScript-Spiel zu programmieren. Ich will das Programm nun durch einen Druck auf die Taste "R" neu starten. Hier ist der Code:

let start,
ziel,
ballradius,
rgbFarbwerte,
x,
y;
function setup() {
  createCanvas(400, 400);
  background('black');
  stroke("white");
  start = circle(60, 390, 10);
  ziel = circle(40, 390, 10);
  ballradius = 2;
  x = 60;
  y = 390;
}
function draw() {
  //lösche bild
  background("black");
  //zeichne Spielfeld
  fill('white');
  stroke("white");
  rect(20, 300, 80, 100);
  rect(50, 300, 100, 60);
  rect(140, 260, 50, 100);
  rect(140, 240, 120, 40);
  rect(230, 170, 30, 100);
  rect(160, 160, 100, 30);
  rect(160, 40, 20, 120);
  rect(160, 40, 100, 10);
  rect(260, 1, 5, 49);
  //zeichne Start-,Endpunkt
  fill("blue");
  stroke("blue");
  circle(60, 390, 10);
  fill("red");
  stroke("red");
  circle(262.25, 10, 10);
  rgbFarbwerte = get(x, y);
  if (rgbFarbwerte[0] === 0 && rgbFarbwerte[1] === 0 && rgbFarbwerte[2] === 0) {
    background("red");
    console.clear();
    console.log("Game over");
  }
  if (rgbFarbwerte[0] === 255 && rgbFarbwerte[2] === 0) {
    background("green");
    console.clear();
    console.log("You win");
  }
  //zeichne Kreis
  stroke("lightgreen");
  fill("lightgreen");
  circle(x, y, 4);
  //steuere Kreis
  if (keyIsDown(68)) { //taste d -> nach rechts
    x = x + 2;
  }
  if (keyIsDown(65)) { //taste a -> nach links
    x = x - 2;
  }
  if (keyIsDown(87)) { // taste w -> nach oben
    y = y - 2;
  }
  if (keyIsDown(83)) { // taste s -> nach unten
    y = y + 2;
  }
}
Computer, Schule, Technik, programmieren, JavaScript, Informatik
Discord.js Level Roles?
  //level system


  bot.on('message', function(message){
    if(message.author.bot) return;
    var addXP = Math.floor(Math.random() * 5) + 1;


    if(!xpfile[message.author.id]){
      xpfile[message.author.id] = {
        xp: 0,
        level: 0,
        reqxp: 100
      }


      fs.writeFile("./xp.json",JSON.stringify(xpfile),function(err){
        if(err) console.log(err)
      })
    }


  xpfile[message.author.id].xp += addXP


  if(xpfile[message.author.id].xp > xpfile[message.author.id].reqxp){
    xpfile[message.author.id].xp -= xpfile[message.author.id].reqxp
    xpfile[message.author.id].reqxp *=1.5
    xpfile[message.author.id].reqxp = Math.floor(xpfile[message.author.id].reqxp)
    xpfile[message.author.id].level += 1


    message.reply("ist auf Level **"+ xpfile[message.author.id].level +"** aufgestiegen.")
  }



  fs.writeFile("./xp.json",JSON.stringify(xpfile),function(err){
    if(err) console.log(err)
  
  //level roles


var role = message.guild.roles.cache.find(role => role.name === "test");


if(xpfile[message.author.id].level == 1)message.member.guild.roles.add(role);


  //rank command


  if(message.content.startsWith("fg!rank")){


    let user = message.mentions.users.first() || message.author


    if(!xpfile[user.id]) return message.channel.send("Dieser User hat noch keine XP gefarmt.")


    const rank = new Discord.MessageEmbed()


    .setTitle("**RANK**")
    .setColor("GREEN")
    .setAuthor(user.tag,user.avatarURL({dynamic:true}))
    .addField("Level: ",xpfile[user.id].level)
    .addField("XP: ",xpfile[user.id].xp +"/"+ xpfile[user.id].reqxp)


    message.channel.send(rank)
  }


    })


  })

Hey, ich habe ein LevelSystem in Discord.js gecodet.

Es funktioniert sehr gut, aber bei den LevelRoles gibt es ein Problem.

Es kommt kein Error oder sonstiges, aber der Bot vergibt die Role nicht. Weiß jemand woran das liegt?

Computer, JavaScript, node.js, Discord, Discord Bot, Discord.js
React .filter/.map "Cannot read property 'handleClick' of undefined"?

Guten Abend,

ich mach eine kleine Function in JS und React und hab ein Fehler den ich nicht verstehe:

In dem Codestück funktioniert es aber der ist nicht so wie ich es brauche. Hier findet er aber die Funktion, bei dem unteren der was die Command handleClick funktion betrifft. Findet er sie nicht

    let itemList = this.props.items.map(item => {
      console.log(item.id);
      return (
        <FoodCategoryItem
          preis={item.price}
          label={item.title}
          text={item.desc}
          key={item.id}
          Command={() => { this.handleClick(item.id) }}
          source={item.img} />


      )
    })

und mit diesem gibt es fehler das die handeclick function undefined ist

    let itemList = this.props.items.filter(function (item) {
      return item.menuid === 'menuid_salat_2222';
    }).map(function ({ id, title, desc, price, img }) {
      
      console.log((id))


      return (
        <FoodCategoryItem
          preis={price}
          label={title}
          text={desc}
          key={id}
          Command={() => { this.handleClick(id) }}
          source={img} />
      )
    });

Also die Items sollen gefiltert werden funktioniert auch aber dann funktioniert der Command mit handleclick nicht mehr

diese Fehlermeldung kommt dann:

TypeError: Cannot read property 'handleClick' of undefined

Computer, Webseite, programmieren, JavaScript, React

Meistgelesene Beiträge zum Thema JavaScript