Senden von Daten mit Ajax zu PHP

Wenn ich auf Senden (modale Form Schaltfläche) klicken, XMLHttpRequest wird scheinbar verdoppelt, verdreifacht, vervierfacht und so weiter. Wenn ich zum Schließen des Modals klicke und uns erneut kontaktiere, passiert etwas Bizarres. Ich brauche wirklich deine Hilfe.Senden von Daten mit Ajax zu PHP

Was ich will: Wenn ich einreichen klicken, werden die Ajax Dinge getan, die modalen schließt und ich können uns wieder auf Kontakt klicken, ohne diese verdammten Probleme

Html-Datei zu geben:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title></title> 

<link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script> 

</head> 
<body> 
    <div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary">Contact us</a></p></div> 
    <!-- model content --> 
    <div id="form-content" class="modal hide fade in" style="display: none; "> 
      <div class="modal-header"> 
        <a class="close" data-dismiss="modal">×</a> 
        <h3>Contact us</h3> 
      </div> 
     <div> 
      <form class="contact"> 
      <fieldset> 
       <div class="modal-body"> 
        <ul class="nav nav-list"> 
       <li class="nav-header">Name</li> 
       <li><input class="input-xlarge" value=" krizna" type="text" name="name"></li> 
       <li class="nav-header">Email</li> 
       <li><input class="input-xlarge" value=" [email protected]" type="text" name="Email"></li> 
       <li class="nav-header">Message</li> 
       <li><textarea class="input-xlarge" name="sug" rows="3"> Thanks for the article and demo 
       </textarea></li> 
       </ul> 
       </div> 
      </fieldset> 
      </form> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-success" id="submit">submit</button> 
      <a href="#" class="btn" data-dismiss="modal">Close</a> 
     </div> 
    </div> 


    <script> 
    $(function() { 
    //twitter bootstrap script 
    $("button#submit").click(function(){ 
      $.ajax({ 
      type: "POST", 
     url: "process.php", 
     data: $('form.contact').serialize(), 
      success: function(msg){ 
        $("#thanks").html(msg) 
       $("#form-content").modal('hide'); 
       }, 
     error: function(){ 
      alert("failure"); 
      } 
       }); 
    }); 
    }); 
    </script>

PHP-Datei:

<?php 
    if (isset($_POST['name'])) { 
    $name = strip_tags($_POST['name']); 
    $email = strip_tags($_POST['Email']); 
    $sug = strip_tags($_POST['sug']); 
    echo "Name  =".$name."</br>"; 
    echo "Email  =".$email."</br>"; 
    echo "Message  =".$sug."</br>"; 
    echo "<span class='label label-info' >your message has been submitted .. Thanks you</span>"; 
    header("Location: test.php"); 
}

Quelle

2016-08-30 Cesar

Nun werden Sie einige HTML-Code zeigen müssen, denn nur Ihre jquery uns nicht viel sagen .. – Naruto

Geschehen .. Ich habe meinen Beitrag bearbeitet. – Cesar

Warum binden Sie sich bei jedem Klick an 'ready' und' click'? –

I a m nicht ganz sicher, was das eigentliche Problem war, aber hier ist eine Lösung für das Senden und Empfangen von Daten über AJAX basierend auf Ihrer bearbeiteten Original-Post.

Wie Sie sehen können, habe ich einige Änderungen vorgenommen. Statt sie als Klartext auszugeben, habe ich sie in das Format JSON kodiert, was sehr praktisch ist, wenn es darum geht, Daten zwischen Daten und Server auszutauschen. Ich wollte auch nicht das HTML zusammen mit der Nachricht zurückgeben, also habe ich es in den HTML Teil verschoben.

Hoffentlich war das irgendwie hilfreich für Sie.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 

    <link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
    <script src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script> 

</head> 
<body> 
    <div id="thanks"> 
    <span class='label label-info feedback'></span> 
    <p><a data-toggle="modal" href="#form-content" class="btn btn-primary">Contact us</a></p> 
    </div> 
    <!-- model content --> 
    <div id="form-content" class="modal hide fade in" style="display: none; "> 
    <div class="modal-header"> 
     <a class="close" data-dismiss="modal">×</a> 
     <h3>Contact us</h3> 
    </div> 
    <div> 
     <form class="contact"> 
     <fieldset> 
     <div class="modal-body"> 
      <ul class="nav nav-list"> 
      <li class="nav-header">Name</li> 
      <li><input class="input-xlarge" value=" krizna" type="text" name="name"></li> 
      <li class="nav-header">Email</li> 
      <li><input class="input-xlarge" value=" [email protected]" type="text" name="Email"></li> 
      <li class="nav-header">Message</li> 
      <li><textarea class="input-xlarge" name="sug" rows="3"> Thanks for the article and demo 
      </textarea></li> 
      </ul> 
     </div> 
     </fieldset> 
    </form> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn btn-success" id="submit">submit</button> 
    <a href="#" class="btn" data-dismiss="modal">Close</a> 
</div> 
</div> 
</body> 
</html>

<?php 
if(isset($_POST['name'])) { 
    $data = []; 

    $name = strip_tags($_POST['name']); 
    $email = strip_tags($_POST['Email']); 
    $sug = strip_tags($_POST['sug']); 

    $data['name'] = $name; 
    $data['email'] = $email; 
    $data['sug'] = $sug; 
    $data['message'] = "Your message has been submitted. Thank you!"; 

    echo json_encode($data); 
}

Quelle

2016-08-30 22:01:35

Senden von Daten mit Ajax zu PHP

Antwort

Verwandte Themen