jQuery Traitement des formulaires Avec PHP MYSQL Base de données à l'Aide de $.Requête ajax
Question: Comment puis-je traiter un formulaire à l'aide de jQuery et de $.ajax demande, de sorte que les données sont transmises à un script qui enregistre dans une base de données?
Problème:
J'ai un simple e-mail formulaire d'inscription que lorsqu'elle est traitée, ajoute l'e-mail avec la date du jour dans une table d'une base de données MySQL. Le traitement de la forme sans jQuery fonctionne comme prévu, l'ajout de l'e-mail et la date. Avec jQuery, la forme fait valoir avec succès et renvoie le message de réussite. Toutefois, aucune donnée n'est ajouté à la base de données.
Toute réflexion serait grandement apprécié!
<!-- 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._%-]+@[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>OriginalL'auteur | 2008-12-12
Vous devez vous connecter pour publier un commentaire.
Au lieu si l'aide de données: dataStr, utilisation:
C'est la bonne façon de le faire pour les requêtes POST.
Aussi, je recommande d'utiliser une forme de plug-in, comme cette.
Plus un pour la forme de plugin, rend la vie beaucoup plus facile. J'ai souvent des formes qui post renvoie à la même page. J'ai envoyer un paramètre supplémentaire (ajax=vrai) que j'utilise pour modifier ce qui le renvoie à la page du navigateur ie. juste un fragment de page que je peux injecter via innerHTML.
Sa méthode est la façon la plus courante de le faire, en fait. 😉
OriginalL'auteur kgiannakakis
Plus un pour la forme de plugin, rend la vie beaucoup plus facile. J'ai souvent des formes qui post renvoie à la même page. J'ai envoyer un paramètre supplémentaire (ajax=vrai) que j'utilise pour modifier ce qui le renvoie à la page du navigateur ie. juste un fragment de page que je peux injecter via innerHTML.
OriginalL'auteur Manoj
vérifier la réponse en provenance de l'process.php fichier.echo et mourir le poste de valeurs et d'alerte de la réponse parce que tout coutures pour être écrit correctement, juste question d'envoyer le post valeurs process.php.
la syntaxe de Sérialiser pourrait également être
OriginalL'auteur sumi