phpajax验证表单
❶ ajax提交表单文件,判断文件大小,类型,php后台
您好,第一步,创建一个表单HTML页面
这里,我们只展示主要的表单部分HTML结构代码:
复制代码代码如下:
<div id="contact_form">
<form name="contact" method="post" action="">
<fieldset>
<label for="name" id="name_label">姓名</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">此项必填</label>
<label for="email" id="email_label">您的Email</label>
<input type="text" name="email" id="email" size="30" value="" class="text-input" />
<label class="error" for="email" id="email_error">此项必填</label>
<label for="phone" id="phone_label">您的联系电话</label>
<input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
<label class="error" for="phone" id="phone_error">此项必填</label>
<br />
<input type="submit" name="submit" class="button" id="submit_btn" value="我要发送" />
</fieldset>
</form>
</div>
几点注意:
这里用一个id为contact_form来包含整个包含信息;这是有意义的,稍后在javaScript与用户交互信息的时候会用到。
大家应该注意到了,这里form标签的属性里面既包含了method和action;这个意义其实不大,因为Javascript直接操作DOM,所以没有这两个属性也是可以的;
务必要给用户输入的<input>标签加独立的id,这和第二点原理类似。否则,无法看到正常的效果。
第二步,开始添加JQuery代码
这里假设你已经从JQuery官方网站上下载了JQuery基库,然后上传到了你的WEB服务器,并添加到你要使用的网页中了。
现在另外新建一个JS文件,添加如下代码:
复制代码代码如下:
$(function() {
$(".button").click(function() {
// 处理表单验证和交给后台处理的逻辑
});
});
第一行的function()函数与Jquery的document.ready函数用法和功能相同,都是在DOM准备完毕后自动触发。
第二行里面是一个单击触发函数click(),需要注意的是,在HTML一页提交按钮上需要放置一个名为“button”的Class,以模拟实现submi提交表单的功能.
从第二点我们可以看出,JQuery可以很好的将结构和逻辑分离。
第三步,编写验证代码
在实际应用中,这一步是必不可少的。在用户漏填,错填某个项目时,及时提示。
复制代码代码如下:
$(function() {
$('.error').hide();
$(".button").click(function() {
// 验证代码
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var phone = $("input#phone").val();
if (phone == "") {
$("label#phone_error").show();
$("input#phone").focus();
return false;
}
});
});
几点注意:
第2行,我们添加一个$('.error').hide()是为了在用户未输入任何信息时隐藏三个class="error"提示错误的label标签。而只有当出现错误,即为空时,错误才会出现。(因为有return false的作用,每次仅会出现一个错误)
在JQuery里面,获取DOM中某个ID或者Class的值非常简单
复制代码代码如下:
//获取id的值
var name = $("input#name").val();
//获取class序号为1的值
var name = $(".name")[1].val();
现假设用户没有输入姓名,处理逻辑应该是:首先显示错误,然后将焦点定位在姓名上。
if (name == "") { //用户名为空
$("label#name_error").show(); //错误提示
$("input#name").focus(); //焦点定位
return false; //返回
}
在必填的字段上验证时,都必须return false,否则会出现必填项未填完即提交的情况。
第四步,通过Jquery的Ajax函数提交表单信息。
这是本教程实现无刷新提交的核心步骤,通过ajax函数来递交javascript从DOM中获取的表单项值,然后异步提交给后台处理程序(process.php),并发送Email。此步紧接在验证程序之后:
复制代码代码如下:
var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "bin/process.php",
data: dataString,
success: function() {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("<h2>联系方式已成功提交!</h2>")
.append("<p>Script by Code52.net</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return false;
以上代码的核心函数是.ajax() ,它所起得作用就是使用POST方式将已经获取的表单信息(dataString)异步传送给所定义的后台PHP url(bin/process.php)。如果数据成功传送,它会将一系列我们定义好的信息返回给用户。最后return false,这样是为了防止页面重新加载。
除了返回成功信息和发送邮件外,我们还可以做其他一些更广泛的事情。比如,将获得的数据交由后台脚本处理时,将数据插入数据库中,然后再将用户提交的信息返回。
详细解释:
首先,获取表单项的值,方法我们已经在第三步中提到过了:
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
//将表单项的值组合成一个字符串
var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
将此组合字符串的值通过AJAX函数传递给后台url,如果成功,则会返回成功信息给用户:
复制代码代码如下:
$.ajax({
type: "POST",
url: "bin/process.php",
data: dataString,
success: function() {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return false;
在本示例中,ajax函数的功能就只有这些了,如果你需要进一步关于ajax函数的信息,可以参考官方文档:jQuery's documentation on the ajax function
第五步,反馈信息给用户的部分
首先,在信息提交成功之后,JQuery会通过以下部分动态的替换掉<div id="contact_form"></form>中的内容,只需要简单的一句话即可实现。
$('#contact_form').html("<div id='message'></div>");
所以请大家记住,如果你以后需要通过JavaScript动态的替换掉某个层或者<span>,可以使用Jquery的.html方法实现,非常简单和方便。
其次,有了这个层肯定还不够,因为里面还没有内容,所以,我们还要给id=message的这个层添加一些显示内容:
$('#message').html("<h2>联系方式已成功提交!</h2>")
同样是动态的为id为message的层添加了一段html用于提示。还可以利用append方法在message层中追加一句:
.append("<p>We will be in touch soon.</p>")
最后,为了表现出提交之后,服务器处理的动态效果,我们设置了以下特效代码:
.hide() //整个层消失
.fadeIn(1500, function() {//在1500毫秒内逐渐出现
//最后再动态追加一个成功图标
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
❷ thinkphp 验证是不是ajax提交
有两种方式,如下:
第一种方式:
PHP判断ajax请求的原理:
在发送ajax请求的时候,我们可以通过XMLHttpRequest这个对象,创建自定义的header头信息, 在jquery框架中,对于通过它的$.ajax, $.get, or $.post方法请求网页内容时,它会向服务器传递一个HTTP_X_REQUESTED_WITH的参数,php中就是在header一层判断是否是ajax请求,对应的根据$_SERVER['HTTP_X_REQUESTED_WITH']判断。
/**
* 当前请求是否ajax请求
*
* @access public
* @return bool
*/
function isAjax()
{
return isset($_SERVER['HTTP_X_REQUESTED_WITH']);
}
注意:
● 一般情况下$_SERVER['HTTP_X_REQUESTED_WITH']默认是XMLHttpRequest
● $_SERVER['HTTP_X_REQUESTED_WITH']也可以自定义创建的,使用XMLHttpRequest.setRequestHeader(name,value);参考文章:http://www.skygq.com/2011/01/04/php-check-request-from-ajax-or-normal/
第二种方式:
通过前台给php传一个type参数来判断,type=1则是ajax,否则是普通提交。
❸ php怎样验证表单文本区域内容是否已存在数据库中
方法:查询数据,若数据存在则输出(前端这个要自己写,我只写了一个echo)
代码如下:
//$conn = new mysqli($sql_server_name, $sql_username, $sql_password, $sql_db);
$timu = $_GET["timu"];
$sql = $conn->query("查询 * from problems where timu
='". $timu . "'"); // 从problems库里查 注意把“查询”改成“select”,因为网络知道会屏蔽sql语句
if (mysqli_fetch_assoc($sql) > 0) {
echo "已存在";
} else {
echo "不存在";
}
❹ 如何利用AJAX+PHP处理表单查询数据
给你个例子,照着改改就成:
<html>
<head>
<script src="selectuser.js"></script>
</head>
<body>
<form>
Select a User:
<select name="users" onchange="showUser(this.value)">
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<p>
<div id="txtHint"><b>User info will be listed here.</b></div>
</p>
</body>
</html>
"selectuser.js" 文件中的 JavaScript 代码:
var xmlHttp
function showUser(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getuser.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
❺ php的ajax问题。请问send()方法括号里面一般传什么参数如何传例如表单验证的时候,表单
//前面的省略,这里直接演示传参
var postuser_name=document.getElementById('name').value;//获取input为name 的文本框的值
var url='ajax.php?postname='+postuser_name+'&n='+Math.random();//设定URL传值方法同时防止缓存
xmlHttp.open("GET",url,true); xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.send(null);
❻ thinkPHP3.2.3利用Ajax前台实现验证码验证,但通过form表单的按钮提交后,验证码一直错误!如何解决
验证码一直错误那就是:后台生成的和前台显示的不是同一个验证码,你可以把后台生成的打印出来测试一下。
1:验证码生成代码:
//输入验证码
function verifyimg(){
//验证码做配置
$config = array(
'seKey' => 'ThinkPHP.CN', // 验证码加密密钥
'codeSet' => '', // 验证码字符集合
'expire' => 1800, // 验证码过期时间(s)
'useZh' => false,
'useImgBg' => false, // 使用背景图片
'fontSize' => 14, // 验证码字体大小(px)
'useCurve' => true, // 是否画混淆曲线
'useNoise' => true, // 是否添加杂点
'imageH' => 45, // 验证码图片高度
'imageW' => 100, // 验证码图片宽度
'length' => 4, // 验证码位数
'fontttf' => '4.ttf', // 验证码字体,不设置随机获取
'bg' => array(243, 251, 254), // 背景颜色
'reset' => true, // 验证成功后是否重置
);
$verify=new Verify($config); //实例化Verify类。 空间类元素引入。使用次数多的情况下。
//verify= new \Think\Verify 完全限定名称方式。 使用次数少的情况下。
$verify->entry(); //数据验证码。
}
2.下面的是一段验证码显示代码:
<ul>
<li class="user_main_text">验证码: </li>
<li class="user_main_input">
<input class="TxtValidateCodeCssClass" id="captcha" name="captcha" type="text">
验证码输出
<img src="{$smarty.const.__CONTROLLER__}/verifyimg" onclick="this.src='{$smarty.const.__CONTROLLER__}/verifyimg/'+Math.random()" alt="" />
</li>
</ul>
希望对你有帮助。