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>
希望對你有幫助。