使用$ .ajax请求使用PHP到MYSQL数据库的jQuery表单处理

问题:如何使用jQuery和$ .ajax请求处理表单,以便将数据传递给将数据写入数据库的脚本?

问题:我有一个简单的电子邮件注册表单,处理后,将电子邮件和当前日期一起添加到MySQL数据库中的表中。 没有jQuery处理表单按预期工作,添加电子邮件和日期。 使用jQuery,表单成功提交并返回成功消息。 但是,没有数据添加到数据库中。

任何见解将不胜感激!

 <?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 .= '

Please enter your email address.

' . "\n"; } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[AZ]{2,4}$", $email)) { $error .= '

Please enter a valid email address.

' . "\n"; } if(!$error){ echo '

You have successfully subscribed!

'; // 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 $(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; }); }); #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; }
<input id="submit-button" type="image" src="/assets/img/css/signup.gif" alt=" SIGNUP " />

You have successfully subscribed!

相反,如果使用data:dataStr,请使用:

 data : {param: value, param2: value2} 

这是为POST请求执行此操作的正确方法。

另外,我建议使用这样的表单插件。

加上一个表单插件,让生活更轻松。 我经常将表格发回到同一页面。 我发送了一个额外的参数(ajax = true),我用它来改变页面返回浏览器的内容,即。 只是一个我可以通过innerHTML注入的页面片段。

检查来自process.php file.echo的响应并消除post值并提醒响应,因为只需将post值发送到process.php就可以正确写入所有接缝。 Serialize的语法也可以

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