Traitement de formulaire jQuery avec PHP à base de données MYSQL à l'aide de $ .ajax Demande

Question: Comment puis-je traiter un formulaire en utilisant jQuery et la requête $ .ajax afin que les données soient passées à un script qui les écrit dans une base de données?

Problème: J'ai un formulaire d'inscription simple e-mail que lors d'un traitement, ajoute l'e-mail ainsi que la date à une table dans une base de données MySQL. Le traitement du formulaire sans jQuery fonctionne comme prévu, en ajoutant l'e-mail et la date. Avec jQuery, le formulaire est correctement envoyé et renvoie le message de réussite. Cependant, aucune donnée n'est ajoutée à la base de données.

Toute idée serait grandement appréciée!

<!-- PROCESS.PHP --> 
    <?php 
     // DB info 
     $dbhost = '#'; 
     $dbuser = '#'; 
     $dbpass = '#'; 
     $dbname = '#'; 

     // Open connection to db 
     $conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql'); 
     mysql_select_db($dbname); 

     // Form variables 
     $email  = $_POST['email']; 
     $submitted = $_POST['submitted']; 

     // Clean up 
     function cleanData($str) { 
      $str = trim($str); 
      $str = strip_tags($str); 
      $str = strtolower($str); 
      return $str; 
     } 
     $email = cleanData($email); 

     $error = ""; 
     if(isset($submitted)) { 
      if($email == '') { 
       $error .= '<p class="error">Please enter your email address.</p>' . "\n"; 
      } else if (!eregi("^[A-Z0-9._%-][email protected][A-Z0-9._%-]+\.[A-Z]{2,4}$", $email)) { 
       $error .= '<p class="error">Please enter a valid email address.</p>' . "\n"; 
      } 
      if(!$error){ 
       echo '<p id="signup-success-nojs">You have successfully subscribed!</p>'; 

       // Add to database 
       $add_email = "INSERT INTO subscribers (email,date) VALUES ('$email',CURDATE())"; 
       mysql_query($add_email) or die(mysql_error()); 

      }else{ 
       echo $error; 
      } 
     } 
    ?> 

<!-- SAMPLE.PHP --> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Sample</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
<script type="text/javascript"> 
     $(document).ready(function(){ 
       // Email Signup 
       $("form#newsletter").submit(function() {  
        var dataStr = $("#newsletter").serialize(); 
        alert(dataStr); 
         $.ajax({ 
          type: "POST", 
          url: "process.php", 
          data: dataStr, 
          success: function(del){ 
           $('form#newsletter').hide(); 
           $('#signup-success').fadeIn(); 
          } 
        }); 
       return false; 
       });    
     }); 
</script> 
<style type="text/css"> 
#email { 
    margin-right:2px; 
    padding:5px; 
    width:145px; 
    border-top:1px solid #ccc; 
    border-left:1px solid #ccc; 
    border-right:1px solid #eee; 
    border-bottom:1px solid #eee; 
    font-size:14px; 
    color:#9e9e9e; 
    } 
#signup-success { 
    margin-bottom:20px; 
    padding-bottom:10px; 
    background:url(../img/css/divider-dots.gif) repeat-x 0 100%; 
    display:none; 
    } 
#signup-success p, #signup-success-nojs { 
    padding:5px; 
    background:#fff; 
    border:1px solid #dedede; 
    text-align:center; 
    font-weight:bold; 
    color:#3d7da5; 
    } 
</style> 
</head> 
<body> 
<?php include('process.php'); ?> 
<form id="newsletter" class="divider" name="newsletter" method="post" action=""> 
    <fieldset> 
    <input id="email" type="text" name="email" /> 
    <input id="submit-button" type="image" src="<?php echo $base_url; ?>/assets/img/css/signup.gif" alt=" SIGNUP " /> 
    <input id="submitted" type="hidden" name="submitted" value="true" /> 
    </fieldset> 
</form> 
<div id="signup-success"><p>You have successfully subscribed!</p></div> 
</body> 
</html>

Source

2008-12-12 Anonymous

Au lieu de cela si vous utilisez des données: dataStr, utilisez:

data : {param: value, param2: value2}

C'est la bonne façon de le faire pour les requêtes POST.

En outre, je recommande d'utiliser un plug-in de formulaire, comme this.

Source

2008-12-12 17:50:41 kgiannakakis

Sa méthode est l'utilisation la plus courante actuellement –

Plus un à la forme plugin, rend la vie beaucoup plus facile. J'ai souvent des formulaires qui reviennent à la même page. J'envoie un paramètre supplémentaire (ajax = true) que j'utilise pour modifier ce que la page retourne au navigateur ie. juste un fragment de page que je peux injecter via innerHTML. – roborourke

Sa méthode est la façon la plus courante de le faire, en fait. ;) –

vérifier la réponse provenant du processus.php file.echo et mourir les valeurs de poste et alerter la réponse parce que tout semble être écrit correctement juste l'envoi des valeurs de poste à process.php. la syntaxe de sérialisation pourrait aussi être

jQuery('#newsletter').formSerialize();

Source

2011-09-27 10:59:30 sumi

Plus un pour le plug-in forme, rend la vie beaucoup plus facile. J'ai souvent des formulaires qui reviennent à la même page. J'envoie un paramètre supplémentaire (ajax = true) que j'utilise pour modifier ce que la page retourne au navigateur ie. juste un fragment de page que je peux injecter via innerHTML.

Source

2012-04-10 07:06:31 Manoj

Traitement de formulaire jQuery avec PHP à base de données MYSQL à l'aide de $ .ajax Demande

Répondre

Questions connexes