Обработка формы jQuery с PHP в базу данных MYSQL с использованием запроса $ .ajax
Вопрос: Как я могу обработать форму с помощью jQuery и запроса $ .ajax, чтобы данные передавались сценарию, который записывает их в базу данных?
Проблема: У меня есть простая форма регистрации по электронной почте, которая при обработке добавляет электронное письмо вместе с текущей датой в таблицу в базе данных MySQL. Обработка формы без jQuery работает по назначению, добавляя адрес электронной почты и дату. С jQuery форма успешно отправляется и возвращает сообщение об успешном завершении. Однако в базу данных не добавляются никакие данные.
Приветствуется любое понимание!
<!-- 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>
Ответы 3
Вместо этого, если вы используете data: dataStr, используйте:
data : {param: value, param2: value2}
Это правильный способ сделать это для запросов POST.
Также я рекомендую использовать плагин формы, например это.
Плюс один к плагину формы, значительно упрощает жизнь. У меня часто есть формы, которые возвращаются на ту же страницу. Я отправляю дополнительный параметр (ajax = true), который я использую, чтобы изменить то, что страница возвращает браузеру, т.е. просто фрагмент страницы, который я могу вставить через innerHTML.
На самом деле, его метод - самый распространенный способ сделать это. ;)
проверьте ответ, исходящий от файла process.php. echo, и умерьте значения сообщения и предупредите ответ, потому что все швы, чтобы быть написано правильно, просто вопрос отправки значений сообщения в process.php. синтаксис Serialize также может быть
jQuery('#newsletter').formSerialize();
Плюс один к плагину формы, значительно упрощает жизнь. У меня часто есть формы, которые возвращаются на ту же страницу. Я отправляю дополнительный параметр (ajax = true), который я использую, чтобы изменить то, что страница возвращает браузеру, т.е. просто фрагмент страницы, который я могу вставить через innerHTML.
Его метод - наиболее распространенное использование на самом деле