Wie kann ich einen Benutzer von einer Seite ohne HTML/View zurückleiten?

Question

Ich mache eine Herausforderung, die Sinatra und Javascript und eine JSON-Datei als die Datenbank (von Art) verwendet und habe eine Straßensperre getroffen, die mich für zwei Tage verrückt hat. Das Problem ist, dass ich in der Lage sein möchte, den Benutzer auf der gleichen Seite wie das Formular /homepage zu halten (oder sie automatisch zurückzuleiten) nach einer erfolgreichen Einreichung und von der erfolgreichen Übermittlung von dort zu benachrichtigen. Was tatsächlich passiert ist, dass, sobald ich das Formular absende, der Benutzer zur Route (POST) '/' umgeleitet wird (und dort bleibt) - jedoch ist keine Ansicht mit diesem Endpunkt verbunden. Was angezeigt wird, ist eine serverseitige Nachricht. Hier

ist die config.ru: (! Dies wäre viel einfacher)

##QUERY THE USERS LIST 
get "/" do 
    protected! 
    File.open("./test-users.json").read 
end 

##ADD A NEW USER 
post "/" do 
    protected! 
    param :name, String, required: true 
    param :email, String, required: true, format: /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/ 

    contents = File.open("./test-users.json").read 
    parsed_contents = JSON.parse(contents) 
    File.delete("./test-users.json") 
    parsed_contents["guests"] << {"email" => params["email"], "name" => params["name"]} 
    File.open("./test-users.json", "w+") do |f| 
    f.puts JSON.pretty_generate(parsed_contents) 
    end 

    "#{params['name']} now signed up with #{params['email']}" 
end 

Nun, ich nicht erlaubt bin, diese Datei zu ändern oder zu. Und hier ist meine Form:

<div class="sidebar-left col-xs-12 col-sm-4"> 
    <form action="/" method="POST" id="registrantForm"> 
     <h1>Please Register</h1> 
     <input type="text" name="name" id="register-name" placeholder="username" required> 
     <input type="email" name="email" id="register-email" placeholder="email" required> 
     <input type="submit" value="Submit"> 
     <div id="form-error" class="error"></div> 
    </form> 
    </div> 

Hier sind einige Dinge, die ich versucht habe,

• die aktuelle window.location Erkennung und wenn es '/' ist dann Umleitung zurück. Dies funktioniert nicht, sobald Sie auf der Route '/' sind - Sie sind nicht mehr auf einer HTML-Seite, so dass das Javascript nicht funktioniert.

• Herumspielen mit onbeforeunload, aber das funktioniert nicht, weil ich den Zugriff auf die Zielroute nicht haben, und erkannte, dass, selbst wenn ich es täte, würde ich die Vorlage werden zu vereiteln, wenn ich weg von '/' umleiten, bevor die Vorlage ist Komplett.

• Ziehen Sie die Übermittlung des Formulars aus dem HTML und in JS, um zu versuchen, die Route nach der Einreichung zu steuern (mit dem Onload-Ereignis), aber ich konnte nicht die Daten zum Senden entweder die Params senden als Query-String oder ein Zeichenfolgeobjekt:

:

function submit(emailInput, nameInput){ 
    var params = { 
    email: emailInput, 
    name: nameInput 
    }; 
    request.open("POST", "http://localhost:9292", true); 
    request.send(JSON.stringify(params)); 
    request.onload(function(){ 
    window.location.assign('http://localhost:9292/homepage'); 
    }); 
} 

oder nicht params mit dem request.send() senden, wie es sich aus der Suchanfrage des url greifen sowieso zu sein scheint. Beides führt dazu, dass die Seite beim Senden ohne Weiterleitung an '\' neu geladen wird, ohne dass die Daten jedoch gespeichert werden.

Wie gehe ich vor, den Benutzer zurück zu der /homepage Route während der Übermittlung der Formulardaten umleiten? Ist das in diesem Setup möglich?

Answer 1

wahrscheinlich einfachste Weg, dies zu tun, ist die Form Aktion mit js zu ersetzen und nur die Werte mit js einreichen - so passiert dann keine Umleitung

Und das ist genau, wie es funktioniert. Also baue ich einen Beispielcode, um es zu beweisen und zu erklären. (Hinweis: Ich habe jQuery nur für die bequeme Sie dies im Klar js tun können)

<script type="text/javascript"> 
    $(document).ready(function() { 
     // submit the from values with js 
     // and clean the input fields 
     // but not submit the form normally 
     // that's why false is returned 
     $('form').submit(function() { 
      // get your form data in a standard URL-encoded notation 
      // standard URL-encoded notation 
      var data = $('form').serialize(); 

      // post your data with ajax to the server 
      // https://api.jquery.com/jQuery.post/ 
      // here you would add your on success function 
      // to display a message to the user or whatever else 
      $.post('/', data); 

      // retuning false here prevents the form to get posted 
      // https://api.jquery.com/submit/ 
      return false; 
     }); 
    }); 
</script> 

Seiten beachten Sie die Ruby-Code viel Potenzial besser zu sein hat.