Ajax基本使用二
2016-12-11 本文已影响0人
书中有凉气
前后端互相：
<button id="btn">321</button>
<script>
function ajax(opts){
var httpreq= new XMLHttpRequest(),
url_con='';
for(var key in opts.data){
url_con+=key+'='+opts.data[key]+'&';
}
url_con = url_con.substr(0, url_con.length - 1);
httpreq.onreadystatechange= function(){
if(httpreq.readyState == 4&& httpreq.status== 200){
opts.success(httpreq.responseText);
}
if(httpreq.status== 403){
opts.error();
}
}
if(opts.type=='post'){
httpreq.open(opts.type, opts.url, true);
httpreq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
httpreq.send(url_con);
}
if(opts.type=='get'){
httpreq.open(opts.type, opts.url+'?'+url_con, true);
httpreq.send();
}
}
document.querySelector('#btn').addEventListener('click', function(){
ajax({
url: 'test.php', //接口地址
type: 'get', // 类型， post 或者 get,
data: {
username: 'xiaoming',
password: 'abcd1234'
},
success: function(ret){
console.log(ret); // {status: 0}
},
error: function(){
console.log('出错了')
}
})
});
</script>
php:
<?php
echo $_GET["username"];
echo $_GET['password'];
?>
如何从后端获取数据操作前端:
（忽视ajax部分代码，不想重新写了，后端仅传送了个5过来）
var button=document.querySelector('#btn'),
div_fa=document.querySelector('#example');
var j=3;
function ajax(opts){
var httpreq= new XMLHttpRequest(),
url_con='';
for(var key in opts.data){
url_con+=key+'='+opts.data[key]+'&';
}
url_con = url_con.substr(0, url_con.length - 1);
httpreq.onreadystatechange= function(){
if(httpreq.readyState == 4&& httpreq.status== 200){
opts.success(addline(httpreq.responseText));
}
if(httpreq.status== 403){
opts.error();
}
}
if(opts.type=='post'){
httpreq.open(opts.type, opts.url, true);
httpreq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
httpreq.send(url_con);
}
if(opts.type=='get'){
httpreq.open(opts.type, opts.url+'?'+url_con, true);
httpreq.send();
}
}
function addline(p){
for(var i=0;i<p;i++){
var div_new=document.createElement("div");
div_new.className='line';
div_new.innerText='内容'+j++;
div_fa.appendChild(div_new);
}
}
button.addEventListener('click', function(){
ajax({
url: 'test.php', //接口地址
type: 'get', // 类型， post 或者 get,
data: {
username: 'xiaoming',
password: 'abcd1234'
},
success: function(ret){
console.log(ret); // {status: 0}
},
error: function(){
console.log('出错了')
}
})
});
php:
<?php
echo 5;
?>
登录基本操作:
<body>
<div class="register">
<h2>注册</h2>
</div>
<div class="ct">
<ul>
<li>
用户名： <input id="username" type="text" placeholder=" 用户名(hunger已被注册)">
<span id="name_tip">只能是字母、数字、下划线,3-10个字符</span>
</li>
<li>
密码： <input type="password" id="psw">
<span id="psw_tip">大写字母、小写、数字、下划线最少两种，6-15个字符</span>
</li>
<li>
再输一次： <input type="password" id="psw_again" placeholder=" 在输入一次密码">
<span id="pswtip_again"></span>
</li>
</ul>
</div>
<button id="btn">注册</button>
<script>
//封装ajax
function ajax(opts){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function (){
if(xhr.readyState==4&&xhr.status==200){
var json=JSON.parse(xhr.responseText);
opts.success(json)
}
if(xhr.readyState==4&&xhr.status==404){
opts.onError()
}
}
var dataStr="";
for(var key in opts.data){
dataStr+=key+"="+opts.data[key]+"&";
}
dataStr=dataStr.substr(0,dataStr.length-1);
dataStr+="&"+new Date().getTime();
//利用Date().getTime()返回值的毫秒数不断变化，制止缓存
if(opts.type.toLowerCase()=='post'){
xhr.open(opts.type,opts.url,ture)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send(dataStr)
}
if (opts.type.toLowerCase()=='get') {
xhr.open(opts.type,opts.url+'?'+dataStr,true)
xhr.send()
}
}
//获取input、span、button
var username=document.getElementById('username');
var name_tip=document.getElementById("name_tip");
var psw=document.getElementById('psw');
var psw_tip=document.getElementById('psw_tip');
var psw_again=document.getElementById('psw_again');
var pswtip_again=document.getElementById('pswtip_again');
var btn=document.getElementById('btn');
//验证用户名
function isValidUsername(str){
var reg=/^\w{3,10}$/;
return reg.test(str);
}
//验证用户名是否已被注册
username.addEventListener('change',function(){
ajax({
url:'test.php',
type:'get',
data:{
username:username.value,
},
success:function(ret){
dealWith(ret)
},
error:function(){
onError()
}
})
});
function dealWith(ret){
if(ret==0){
name_tip.innerText='该用户名已存在';
username.style.border="1px solid red";
}
if(ret==1&&isValidUsername(username.value)){
name_tip.innerText='该用户名可用';
username.style.border="1px solid gray";
}
if(!isValidUsername(username.value)){
name_tip.innerText = '该用户名格式不正确';
username.style.border = "1px solid red";
}
}
function onError(){
alert("oh,出错了...")
}
//判断密码
function isValidPsw(str){
var reg1=/(^\d{6,15}$)|(^[A-Z]{6,15})$|(^[a-z]{6,15}$)|(^_{6,15}$)|(^\w{0,5}$)/
var reg2=/^\w{6,15}$/
if(reg1.test(str)){
return
}
if(reg2.test(str)){
return true
}
}
//判断密码格式
//第一次输入
psw.addEventListener('change',function(){
if(!isValidPsw(psw.value)){
psw_tip.innerText="密码格式不正确";
psw.style.border="1px solid red";
}else{
psw_tip.innerText="";
psw.style.border="1px solid gray";
}
})
//再次输入密码
psw_again.addEventListener('change',function(){
if(psw_again.value==""){
pswtip_again.innerText="密码不能为空";
psw_again.style.border="1px solid red";
}
else if(psw_again.value==!psw.value){
pswtip_again.innerText="两次密码输入不一致";
psw_again.style.border="1px solid red";
}
else if(!isValidPsw(psw_again.value)){
pswtip_again.innerText="密码格式不正确";
psw_again.style.border="1px solid red";
}
else{
pswtip_again.innerText='';
psw_again.style.border="1px solid gray";
}
})
//btn的注册验证
btn.addEventListener('click',function(){
// e.preventDefault();
if(isValidUsername(username.value)&&psw.value==psw_again.value){
alert('注册中...')
}else{
alert('信息不符,请重新输入')
}
})
</script>
</body>
php
<?php
$name=$_GET['username'];
if($name=="hunger"){
echo 0;
}else{
echo 1;
}
?>
