ajax
Posted 李昊宇
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax相关的知识，希望对你有一定的参考价值。
AJAX包括$.ajax $.post $.get $.getJSON
$.get和$.post唯一区别是后台接收数据的方式不同。
$.each是jQuery中的循环数组方发，必须引用过jQuery后才可使用。
$.each(result,function(){});
AJAX是Async(异步) javascript And XML
$.ajax({
url:‘‘,//请求路径
type:‘‘,//请求方式post或get,默认是get请求
datatype:‘‘,//请求文本类型html xml json text
async:‘‘,//同步或是异步,默认异步，默认的时候不用谢
data:‘‘,//传参数或是变量，get方式不写data
beforeSend:‘‘,//设置发送函数之前的一些操作
complete:‘‘,//请求完成之后的一些操作/函数 （readyState）
success:‘‘,//请求成功之后的一些处理 （status==200）
error：‘‘//请求失败之后进行的一些处理
});
ajax-post.html:
onblur=""; //鼠标离开触发，可以在标签内写onblur,也可以在<script>中写.blur
onmouseout="";
retrurn false; //在js中return有终止函数执行和传递数值的功能。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>TODO supply a title</title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <script type="text/javascript" src="jquery.min.js"></script> 8 </head> 9 <body> 10 <form action="" method="post" id="postform"> 11 <input type="text" name="username" id="username"> 12 <input type="password" name="password" id="password"> 13 <a href="javascript:void(0);" onclick="post_ajax()">提交</a> 14 <!--href="javascript:void(0);代表点击事件无返回值,点击后页面不会变动，如果不加会返回顶部"--> 15 </form> 16 <script type="text/javascript"> 17 function post_ajax(){ 18 var username=$("input[name=username]").val(); 19 var password=$("#password").val(); 20 var param={ 21 ‘username‘:username,‘password‘:password 22 };//使用post传参时使用, 23 //serialize序列化,对form表单元素序列化编码。username=value&passsword=111。比上边那种方法简单 24 var param1=$("#postform").serialize();//属于form表单独有的方法 25 // console.log(param1); 26 // $.ajax({ 27 // url:"ajax-post.php", 28 // type:"POST",//提交方式 29 // dataType:"text", 30 // data:param,//传参数 31 // success:function(result){//响应成功之后 32 // alert(result); 33 // }, 34 // error:function(){ 35 // alert("请求失败"); 36 // } 37 // }); 38 // $.post和$.get唯一区别是后台接收数据方法不同 39 $.post(//url,data,success,datatype 40 "ajax-post.php", 41 param1, 42 function(result){ 43 // alert(result.username);//对象是通过.来调属性（包括数组键名） 44 // window.location.href="http://www.baidu.com"; 45 $.each(result,function(i,v){ 46 //$.each(),是jq中的数组循环(上边必须引入jQuery)，第一个参数是循环变量，第二个参数是一个回调函数，function中的i，v相当于数组中的k，v 47 alert(v.username); 48 }) 49 }, ‘json‘//这里json规定了返回的字符串是否以对象的方式调用。json是js中的对象，在PHP中是一个固定格式的字符串 50 ); 51 // $.get( 52 // "ajax.php", 53 // param, 54 // function (result){ 55 // alert(result); 56 // }, 57 // "text" 58 // ) 59 } 60 </script> 61 </body> 62 </html>
ajax-post.php
json_encode(); //把数组转换为json格式字符串。 [{"username":"张三","password":"123456"},{}]
json_decode();
1 <?php 2 //var_dump($_POST); 3 //$data=$_POST; 4 //post传过来一个数组 5 //echo json_encode($data);//把数组转换为json格式；它的格式{k:v，k:v}。json就是一个字符串 6 $arr=[//假设这是数据库返回的一个数组 7 array(‘username‘=>‘张三‘,‘password‘=>‘123123‘), 8 array(‘username‘=>‘李四‘,‘password‘=>‘123123‘), 9 ]; 10 echo json_encode($arr);//把数组转换为json数组字符串,用[]来表示数组; 11 //echo "[{\"username\":\"张三\",\"password\":\"123123\"},{\"username\":\"李四\",\"password\":\"123123\"}]"; 12 //手动组合或者是使用json_encode。单引号原样输出字符串 13 //{"username":val,"password":11}这种格式的字符串就是json。[{}]这种格式是json数组 14 //从服务器上读取的数据是一个数组，通过json_encode转换为字符串 15 //include ‘ajax-wanzheng-form.php‘; 16 //echo 111;
form表单前台ajax验证：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>TODO supply a title</title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <script type="text/javascript" src="jquery.min.js"></script> 8 </head> 9 <body> 10 <div> 11 <form action="" method="post" name="ajaxform" id="ajaxform111"> 12 用户名：<input type="text" name="username" id="username" onblur=""><span class="error"></span> 13 <br><br> 14 密 码:<input type="password" name="password" id="password"><span class="error"></span> 15 <br><br> 16 确认密码:<input type="password" name="verty" id="verty"><span class="error"></span> 17 <br><br> 18 邮 箱：<input type="text" name="email" id="email"><span class="error"></span> 19 <br><br> 20 联系方式：<input type="text" name="contact" id="contact"><span class="error"></span> 21 <br><br> 22 <input type="button" value="提交" name="submitform" id="submitform"> 23 </form> 24 </div> 25 <script type="text/javascript"> 26 // $("#username").focus(); 27 $("#username").blur(function(){//鼠标离开时触发 28 checkuser(); 29 }) 30 $("#submitform").click(//点击事件， 31 function(){ 32 if(!checkuser()||!checkpassword()||!checkverty()||!checkemail()||!checkcontact()){ 33 return false; 34 } 35 $.post("ajax_reg.php",$("#ajaxform111").serialize(),function(result){ 36 if(result==true){ 37 alert(‘注册成功‘); 38 window.location.href="http://www.baidu.com"; 39 }else{ 40 alert(result); 41 } 42 },‘text‘)//后台验证 43 // $("#ajaxform111").submit();//form表单的提交属性 44 } 45 ) 46 $("#password").blur(function(){ 47 checkpassword(); 48 }) 49 $("#verty").blur(function(){ 50 checkverty(); 51 }); 52 $("#email").blur(function(){ 53 checkemail(); 54 }) 55 $("#contact").blur(function(){ 56 checkcontact(); 57 }) 58 function checkcontact(){ 59 var contact = $("#contact").val(); 60 var phone = /^1[3,5,7,8]\d{9}/; 61 if($.trim(contact)==""){ 62 alert(‘联系方式不能为空‘); 63 return false; 64 } 65 if(!phone.test(contact)){ 66 alert(‘联系方式格式有问题‘); 67 return false; 68 } 69 return true; 70 } 71 function checkemail(){ 72 var email=$("#email").val(); 73 var email_reg=/^\w{3,12}@\w{2,4}\.(com|cn|net|cc)/; 74 if($.trim(email)==""){ 75 alert("邮箱不能为空"); 76 return false; 77 } 78 if(!email_reg.test(email)){ 79 alert("邮箱格式有问题"); 80 return false; 81 } 82 return true; 83 } 84 function checkverty(){ 85 $verty=$("#verty").val(); 86 if($.trim(verty)==""){ 87 alert("确认密码不能为空"); 88 return false; 89 } 90 if($("#verty").val()!=$("#password").val()){ 91 alert("两次输入的密码不一样，请重新输入"); 92 return false; 93 } 94 return true; 95 } 96 function checkpassword(){ 97 var password=$("#password").val(); 98 if($.trim(password)==""){ 99 alert("密码不能为空"); 100 return false; 101 } 102 if(password.length<6){//字符串长度判断 103 alert("密码长度不能少于6位"); 104 return false; 105 } 106 if(password.length>12){ 107 alert("密码长度不能大于12位"); 108 return false; 109 } 110 return true; 111 } 112 function checkuser(){ 113 var flag=true;//设置一个标记 114 var username = $("#username").val(); 115 if($.trim(username)==""){ 116 alert("用户名不能为空"); 117 // $("#username").focus(); 118 // setTimeout(function(){$("#username").focus();},5);//setTime延迟方法 119 flag=false; 120 }else{ 121 $.ajax({ 122 url:"ajax-wanzheng-form.php", 123 async:false,//同步 124 data:{"username":username}, 125 type:"POST", 126 success:function(result){ 127 if(result=="用户名已存在"){ 128 alert("用户名已存在"); 129 flag=false; 130 } 131 } 132 }) 133 } 134 return flag; 135 } 136 </script> 137 </body> 138 </html>
from表单后台处理：
1 <?php 2 $data=$_POST; 3 if(empty($data["username"])){ 4 echo "用户名不能为空"; 5 exit; 6 }else{ 7 if($data["username"]=="张三"){ 8 echo "用户名已存在"; 9 exit; 10 } 11 }
getJSON: 参考JSONP跨域数据传输
getjson.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>TODO supply a title</title> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <script type="text/javascript" src="jquery.min.js"></script> 8 </head> 9 <body> 10 <a href="javascript:void(0)" onclick="getJson()">点击</a> 11 <script type="text/javascript"> 12 // getJson是把后台返回的json字符串当成json对象来处理 13 function getJson(){ 14 $.getJSON("getjson.php",null,function(result){ 15 alert(result.username); 16 }); 17 } 18 // $(‘a‘).click(); 19 </script> 20 </body> 21 </html>
getjson.php
1 <?php 2 $data=[ 3 ‘username‘=>‘张三‘, 4 ‘password‘=>‘123‘, 5 ]; 6 echo json_encode($data);
以上是关于ajax的主要内容，如果未能解决你的问题，请参考以下文章