设置jQuery按钮，而不是PHP错误和成功状态 [英] Set jquery button instead of php error and success status
本文介绍了设置jQuery按钮，而不是PHP错误和成功状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的index.html：
< body>
< div id =newsletterform>
< div class =wrap>
< h3>获取电子邮件更新< / h3>
< form action =send.phpmethod =postid =newslettername =newsletter>
< input type =emailname =signup-emailid =signup-emailvalue =placeholder =在此处插入电子邮件/>
< button class =btn btn-7 btn-7h icon-envelope>提交表单< / button>
< span class =arrow>< / span>
< / form>
< div id =response>< / div>
< / div>
< / div>
< script src =assets / js / lib.js>< / script>
< / body>
这里是我的send.php：
<？php
$ host =;
$ dbname =;
$ user =;
$ pass =;
$ email = filter_var（$ _ POST ['signup-email']，FILTER_SANITIZE_EMAIL）;
$ datetime = date（'Y-m-d H：i：s'）;
$ b尝试{
$ db = new PDO（mysql：host = $ host; dbname = $ dbname，$ user，$ pass）;
if（empty（$ email））{
$ status =error;
$ message =电子邮件地址栏不能为空;
} else if（！preg_match（'/ ^ [^ 0-9] [A-z0-9 ._％+ - ] +（[。] [A-z0-9 _] +）* [@] [A-z0-9 _] +（[。] [A-z0-9 _] +）* [。] [Az] {2,4} $ /'，$ email））{
$ status =错误;
$ message =您必须填写有效的电子邮件地址;
} else {
$ existingSignup = $ db-> prepare（SELECT COUNT（*）FROM signups WHERE signup_email_address ='$ email'）;
$ existingSignup-> execute（）;
$ data_exists =（$ existingSignup-> fetchColumn（）> 0）？真假;如果（！$ data_exists）{
$ sql =INSERT INTO signups（signup_email_address，signup_date）VALUES（：email，：datetime）;
。
$ q = $ db-> prepare（$ sql）;
$ q-> execute（
array（
'：email'=> $ email，
'：datetime'=> $ datetime
）） ;
if（$ q）{
$ status =success;
$ message =您已成功订阅;
} else {
$ status =< button class =btn btn-7 btn-7h icon-envelope> Submit form< / button>;
$ message =发生错误，请重试;
} else {
$ status =< button class =btn btn-7 btn-7h icon-envelope> Submit form< / button>;
$ message =这封电子邮件已被订阅;
$ data = array（
'status'=> $ status，
'message'=> $ message
）;
echo json_encode（$ data）;
$ db = null;
}
catch（PDOException $ e）{
echo $ e-> getMessage（）;
}
？>
我已经使用html，php和sql创建了订阅表单。
它工作正常，现在我需要更新像使用错误和成功按钮，而不是显示错误或成功消息。
以便我创建两个按钮是错误和成功，现在我需要添加在我的索引页面。如果我输入错误的电子邮件ID或空白或重复的邮件ID的手段，它显示错误按钮或其他成功按钮。
按钮应该是这样的：我已经在jsfiddle ： http://jsfiddle.net/b9y5bunp/3/
我可以知道，如何实现这个，请提前致谢。 c $ c> $ status 与结果无论是'错误'还是'成功'
如果（！$ data_exists）{
$ sql =INSERT INTO signups（signup_email_address，signup_date）VALUES（：email，：datetime）;
$ q = $ db-> prepare（$ sql）;
$ q-> execute（
array（
'：email'=> $ email，
'：datetime'=> $ datetime
）） ;
if（$ q）{
$ status =success;
$ message =您已成功订阅;
} else {
$ status =error;
$ message =发生错误，请重试;
}
} else {
$ status =error;
$ message =这封电子邮件已被订阅;
}
在HTML中，添加 id 到 id =actbtn
< ; button id =actbtnclass =btn btn-7 btn-7h icon-envelope> Submit form< / button>
在Javascript中，将ajax请求更新为
$（document）.ready（function（）{
$（'＃newsletter'）。submit（function（）{
var $ this = $ （this），
$ response = $（'＃response'），
$ mail = $（'＃signup-email'），
testmail = / ^ [^ 0-9] [A-Z0-9 ._％+ - ] [。] +（[。] [A-Z0-9 _] +）* [@] [A-Z0-9 _] +（[A-Z0-9 _] + ）* [。] [Az] {2,4} $ /，
hasError = false;
$ response.find（'p'）。remove（）;
if（！testmail.test（$ mail.val（）））{
$（'＃actbtn'）。removeClass（'btn-error'）。addClass（'btn-error'）;
//$response.html('<p class =error>请输入一个有效的电子邮件< / p>'）;
hasError = true;
}
if（hasError === false）{
$ response.find（'p'）。remove（）;
$ response.addClass（'loading'）;
$ .ajax（ {
type：POST，
dataType：'json'，
cache：false，
url：$ this.attr（'action'），
data ：$ this.serialize（），
success：function（data）{
if（data！=''）{
$ response.removeClass（'loading'）;
if（data.status =='success'）{
$（'＃actbtn'）。removeClass（'btn-error'）。addClass（'btn-success'）;
}
else {
$（'＃actbtn'）。removeClass（'btn-error'）。addClass（'btn-error'）;
}
}
}
}）;
}
return false;
}）;
}）;
Here is my index.html:
<body>
<div id="newsletterform">
<div class="wrap">
<h3>Get Email Update</h3>
<form action="send.php" method="post" id="newsletter" name="newsletter">
<input type="email" name="signup-email" id="signup-email" value="" placeholder="Insert email here" />
<button class="btn btn-7 btn-7h icon-envelope">Submit form</button>
<span class="arrow"></span>
</form>
<div id="response"></div>
</div>
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="assets/js/lib.js"></script>
</body>
And here is my send.php:
<?php
$host = "";
$dbname = "";
$user = "";
$pass = "";
$email = filter_var($_POST['signup-email'], FILTER_SANITIZE_EMAIL);
$datetime = date('Y-m-d H:i:s');
try {
$db = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);
if (empty($email)) {
$status = "error";
$message = "The email address field must not be blank";
} else if (!preg_match('/^[^0-9][A-z0-9._%+-]+([.][A-z0-9_]+)*[@][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/', $email)) {
$status = "error";
$message = "You must fill the field with a valid email address";
} else {
$existingSignup = $db->prepare("SELECT COUNT(*) FROM signups WHERE signup_email_address='$email'");
$existingSignup->execute();
$data_exists = ($existingSignup->fetchColumn() > 0) ? true : false;
if (!$data_exists) {
$sql = "INSERT INTO signups (signup_email_address, signup_date) VALUES (:email, :datetime)";
$q = $db->prepare($sql);
$q->execute(
array(
':email' => $email,
':datetime' => $datetime
));
if ($q) {
$status = "success";
$message = "You have been successfully subscribed";
} else {
$status = "<button class="btn btn-7 btn-7h icon-envelope">Submit form</button>";
$message = "An error occurred, please try again";
}
} else {
$status = "<button class="btn btn-7 btn-7h icon-envelope">Submit form</button>";
$message = "This email is already subscribed";
}
}
$data = array(
'status' => $status,
'message' => $message
);
echo json_encode($data);
$db = null;
}
catch(PDOException $e) {
echo $e->getMessage();
}
?>
I have been created subscribe form using html, php and sql.
It works fine, Now i need to update like, use error and success button instead of displayed error or success message.
so that i created two buttons that is error and success, Now i need to add in my index page. If i enter wrong email id or blank or repeated mail id means, it shows error button or else success button.
Button should be like this: I have been created in jsfiddle: http://jsfiddle.net/b9y5bunp/3/
May i know, how to achieve this one, Thanks in advance.
解决方案
In PHP set $status with the results whether it is 'error' or 'success'
if (!$data_exists) {
$sql = "INSERT INTO signups (signup_email_address, signup_date) VALUES (:email, :datetime)";
$q = $db->prepare($sql);
$q->execute(
array(
':email' => $email,
':datetime' => $datetime
));
if ($q) {
$status = "success";
$message = "You have been successfully subscribed";
} else {
$status = "error";
$message = "An error occurred, please try again";
}
} else {
$status = "error";
$message = "This email is already subscribed";
}
In HTML, add a id to the button like id="actbtn"
<button id="actbtn" class="btn btn-7 btn-7h icon-envelope">Submit form</button>
In Javascript, updated the ajax request to following
$(document).ready(function () {
$('#newsletter').submit(function () {
var $this = $(this),
$response = $('#response'),
$mail = $('#signup-email'),
testmail = /^[^0-9][A-z0-9._%+-]+([.][A-z0-9_]+)*[@][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/,
hasError = false;
$response.find('p').remove();
if (!testmail.test($mail.val())) {
$('#actbtn').removeClass('btn-error').addClass('btn-error');
//$response.html('<p class="error">Please enter a valid email</p>');
hasError = true;
}
if (hasError === false) {
$response.find('p').remove();
$response.addClass('loading');
$.ajax({
type: "POST",
dataType: 'json',
cache: false,
url: $this.attr('action'),
data: $this.serialize(),
success: function(data){
if(data!=''){
$response.removeClass('loading');
if(data.status == 'success'){
$('#actbtn').removeClass('btn-error').addClass('btn-success');
}
else{
$('#actbtn').removeClass('btn-error').addClass('btn-error');
}
}
}
});
}
return false;
});
});
这篇关于设置jQuery按钮，而不是PHP错误和成功状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
