thinkphp框架中jquery $.post()用法詳解
8描述:
獲得 test.php 頁面返回的 json 格式的內容：：
jQuery 程式碼:
$.post("test.php", { "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");案例：
<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
public function index(){
$this->display();
}
public function test()
{
$account=I('post.account');
$user="dalei";
echo $account.".".$user;
}
}
//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
使用者名稱：<input type="text" id="uName" class="uName">
<p></p>
<a></a>
<script type="text/javascript" src="__PUBLIC__/jquery-1.8.2.min.js"></script>
<script>
window.onload=function()
{
alert("載入成功！");
}
$(document).ready(function(){
$('#uName').blur(function(){
var account=1;
$.post("__URL__/test", { "account": account },function(data){
// alert(data);
var list=data.split(".");
var a=list[0];
var b=list[1];
$("p").html(a);
$("a").html(b);
// document.write(data.split("."));
},"text");
})
})
</script>
前端js寫法：
<script src="/m/Public/js/jquery.js"></script>
<script>
$(function(){
$('#uName').blur(function(){
var account=$('#uName').val();
if(account==''){
$('.uName').html('請輸入使用者名稱');
return false;
}
if(account.length<5 ||account.length>=16){
$('.uName').html('使用者名稱長度必須在5-16位之間');
$('.uName').css('color','red');
return flase;
}
$.post('__URL__/checkAccount',{'account':account},function(data){ //__URL__/checkAccount
if(data==1){
$('.uName').html('該使用者名稱已註冊');
}else{
$('.uName').html('恭喜，此使用者名稱可以使用。');
$('.uName').css('color','green');
}
})
})
$('input[type=password]').blur(function(){
if($(this).is('#uPwd')){
if($(this).val()==''){ $('.uPwd').html('請輸入密碼'); }
if($(this).val().length<5 || $(this).val().length>=16){
$('.uPwd').html('密碼長度必須在5-16位之間');
}else{
$('.uPwd').html('密碼正確');
$('.uPwd').css({'color':'green','fontSize':'14px'});
}
}
if($(this).is('#uPwd1')){
if($(this).val()==''){ $('.uPwd1').html('請輸入確認密碼');}
if($(this).val().length<5 || $(this).val().length>=16){
$('.uPwd1').html('密碼長度必須在5-16位之間');
}else{
if($('#uPwd').val()!=$('#uPwd1').val()){
$('.uPwd1').html('兩次密碼不一致');
}else{
$('.uPwd1').html('密碼正確');
$('.uPwd1').css({'color':'green','fontSize':'14px'});
}
}
}
})
$('#email').blur(function(){
var email=$('#email').val();
var reg=/^[a-z0-9](\w|\.|-)*@\w{2,}\.(com|cn|net|com.cn|net.cn)$/i;
if(!reg.test(email)){
$('.email').html('郵箱格式不正確');
$('.email').css({'color':'red','fontSize':'14px'});
return false;
}else{
$('.email').html('郵箱正確');
$('.email').css({'color':'green','fontSize':'14px'});
}
$.post('__URL__/checkEmail',{'email':email},function(data){
if(data==1){
$('.email').html('郵箱已註冊');
$('.email').css({'color':'red','fontSize':'14px'});
return false;
}
})
})
})
$(function(){
$('#phone').blur(function(){
var phone=$('#phone').val();
/* var reg=/^1[3458]\d{9}$/;
if(!reg.test(phone)){
$('.phone').html('手機號碼格式不正確');
$('.phone').css({'color':'red','fontSize':'14px'});
return false;
}else{
$('.phone').html('手機號碼正確');
$('.phone').css({'color':'green','fontSize':'14px'});
}*/
$.post('__URL__/phone',{'phone':phone},function(data){
alert(data);
if(data==1){
$('.phone').html('手機號碼已註冊');
$('.phone').css({'color':'red','fontSize':'14px'});
return false;
}
})
})
$('#userLogin').click(function(){
var account=$('#uName').val();
var uPwd=$('#uPwd').val();
var uPwd1=$('#uPwd1').val();
var email=$('#email').val();
var phone=$('#phone').val();
if(account==''){$('.uName').html('請輸入使用者名稱'); return false;}
if(uPwd==''){$('.uPwd').html('請輸入使用者密碼'); return false; }
if(uPwd1==''){$('.uPwd1').html('請輸入確認密碼'); return false; }
if(email==''){$('.email').html('請輸入電子郵箱'); return false; }
if(phone==''){$('.phone').html('請輸入手機號碼'); return false; }
$.post('__URL__/reg',{'account':account,'password':uPwd,'email':email,'phone':phone},function(data){
if(data==1){
alert('註冊成功');
window.location.href='__APP__/Member/User/index';
return false;
}else if(data==2){
alert('註冊失敗');
return false;
}
})
})
})
</script>
對應控制器寫法：
thinkphp jquery與ajax使用者登錄檔單驗證
例項：thinkphp jquery與ajax實現使用者登錄檔單驗證
步驟：
1，檢測使用者名稱是否已註冊。
2，對郵箱進行檢測是否已被註冊過。
3，對手機號碼進行檢測是否已被註冊過。
4，分別對這三個表單框新增失去焦點的事件。
5，最後，當點選新使用者註冊時，對所有文字控制元件的值判斷是否為空，為空則不允許提交。
<?php
UserAction extends Action{
public function reg(){
if(IS_POST){
if(M('member')->data($_POST)->add()){
echo 1;
}else{
echo 2;
}
}
$this->display();
}
public function checkAccount(){
$account=I('post.account');
$list=M('member')->where(array('account'=>$account))->select();
$list=$list[0];
if(!empty($list)){
echo 1;
}
}
public function checkEmail(){
$email=I('post.email');
$list=M('member')->where(array('email'=>$email))->select();
$list=$list[0];
if(!empty($list)){
echo 1;
}
}
public function phone(){
$phone=I('post.phone');
$list=M('member')->where(array('phone'=>$phone))->select();
$list=$list[0];
if(!empty($list)){
echo 1;
}
}
}
?>