JS笔记
前端笔记 2016-10-14 13:28:05 前端笔记   笔记   

 

AJAX 笔记 

 

完整的一次demo：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

JavaScript Code复制内容到剪贴板
  1. <script>  
  2. function dig() {  
  3.     var a=document.form_main.usr.value; //这里的form_main是form的name值这里的usr是指定表单的name值  
  4.     var b=$("#test").val();             //JQuery获得表单的值  
  5.     var id=$(".dig").attr("id");  
  6.     var classid=$(".dig").attr("classid");  
  7.     var n=$(".dig").attr("n");  
  8.     $.ajax({  
  9.         type: "POST",  
  10.         url: "/test/a.php",  
  11.         dataType: 'html',  
  12.         data:{  
  13.             a : a,  
  14.             b : b,  
  15.             tit : "首页匿名用户"  
  16.         },  
  17.         success:function(data,status){  
  18.             switch(data){  
  19.                   case"success":  
  20.                     alert("提交成功，我们会尽快与您联系！");  
  21.                     $("#phe").val("");  
  22.                     $("#con").val("");  
  23.                   break;  
  24.                   case"Error":alert("提交失败，请联系网站管理员！");  
  25.                   break;  
  26.                   case"Empty":alert("必填项未写完全！");  
  27.                   break;  
  28.               }  
  29.          },  
  30.         error:function(xhr, ajaxOptions, thrownError){  
  31.           console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);  
  32.         }  
  33.     })  
  34. }  
  35. </script>  

 

注意点：

JS代码中，传递三个值：a b tit

传递类型是POST 大写

 

a.php接收传递过来的变量：

PHP Code复制内容到剪贴板
  1. <?php  
  2.     require('e/class/connect.php');        //引入数据库配置文件和公共函数文件  
  3.     require('e/class/db_sql.php');        //引入数据库操作文件  
  4.     $link=db_connect();                //连接MYSQL  
  5.     $empire=new mysqlquery();        //声明数据库操作类  
  6.        
  7.         $a=(int)$_POST['a'];  
  8.         $b=(int)$_POST['b'];  
  9.         $tit=RepPostVar($_POST['tit']);  //过滤为：不带空格或其他特殊符号  
  10.            
  11.         //执行业务逻辑  
  12.        
  13.        
  14.     db_close();                        //关闭MYSQL链接  
  15.     $empire=null;                        //注消操作类变量  
  16. ?>  

 

XML/HTML Code复制内容到剪贴板
  1. $("form.registerform").submit(); //JQ的提交表单操作  
  2.   
  3. $("#loginbox").serialize(); //JQ的ajax提交整个表单>data:$("#loginbox").serialize();  

 

 

JavaScript Code复制内容到剪贴板
  1. <script>  
  2.     var form1 = $("#loginbox");  
  3.     $.ajax({   
  4.         type: "POST",   
  5.         url: "/test/a.php",   
  6.         dataType: 'html',   
  7.         data:form1.serialize(),  
  8.         success:function(data,status){  
  9.             console.log(data);  
  10.             // switch(data){   
  11.             // case"success":   
  12.             // alert("提交成功，我们会尽快与您联系！");   
  13.             // $("#phe").val("");   
  14.             // $("#con").val("");   
  15.             // break;   
  16.             // case"Error":alert("提交失败，请联系网站管理员！");   
  17.             // break;   
  18.             // case"Empty":alert("必填项未写完全！");   
  19.             // break;   
  20.             // }   
  21.         },   
  22.         error:function(xhr, ajaxOptions, thrownError){   
  23.             console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);   
  24.         }   
  25. })  
  26. </script>  

 

JavaScript Code复制内容到剪贴板
  1. <script>  
  2. $(document).on('click', '#AddFava', function(event) {  
  3.    $.ajax({  
  4.        url: '/e/member/doaction.php',  
  5.        type: 'post',  
  6.        data: {enews: 'AddFava', cid: 0, classid:[!--classid--], id:[!--id--]},  
  7.    })  
  8.    .done(function(data) {  
  9.         var msg = $(data).find("b").text();  
  10.         if (msg == '此收藏链接已存在') {  
  11.             alert('您已经收藏过此信息！');  
  12.         }else if( msg == '您还没登录!'){  
  13.             var r = confirm('您还没登录，请登录后操作！');  
  14.             if (r == true){  
  15.                 self.location.href = "/e/member/login/?from=[!--titleurl--]";  
  16.             }  
  17.         }else{  
  18.             alert(msg);  
  19.         }  
  20.    })  
  21.    .fail(function() {  
  22.        alert('参数错啦！')  
  23.    });  
  24. });  
  25. </script>  

 

 

 

设置ajax head头

JavaScript Code复制内容到剪贴板
  1. $.ajax({  
  2.     //请求类型，这里为POST  
  3.     type: 'POST',  
  4.     //你要请求的api的URL  
  5.     url: this.api.unFollow ,  
  6.     //是否使用缓存  
  7.     cache:false,  
  8.     //数据类型，这里我用的是json  
  9.     dataType: "json",   
  10.     //必要的时候需要用JSON.stringify() 将JSON对象转换成字符串  
  11.     data: params,  
  12.     //添加额外的请求头  
  13.     headers : {  
  14.         'Token':'1233333'  
  15.     },  
  16.     // beforeSend: function(request) {  
  17.     //     request.setRequestHeader("Test", "Chenxizhang");  
  18.     // },  
  19.       
  20.     //请求成功的回调函数  
  21.     success: function(data){  
  22.        //函数参数 "data" 为请求成功服务端返回的数据  
  23.        if(res.hasOwnProperty("errorMsg")) {  
  24.             this.$toast("接口异常");  
  25.         }  
  26.   
  27.         this.$toast("取消关注");  
  28.         this.isFollow = false;  
  29.    },  

 

 

 

ajax 设置async为同步，默认是true异步，可以设定全局变量：

JavaScript Code复制内容到剪贴板
  1. var lawyers = [];  
  2.   function getLawyers(){  
  3.       $.ajax({  
  4.           type: "GET",  
  5.           url:"index.php?route=lawyer/report/getLawyers",  
  6.           async:false,  
  7.           dataType:"json",  
  8.           success:function(data){  
  9.               lawyers = data;  
  10.               return true;  
  11.           }  
  12.       });  
  13.   }  
  14.   
  15.   getLawyers();  
  16.   console.log(lawyers);  

 

PHP Code复制内容到剪贴板
  1. $.post("test.php", { "func": "getNameAndTime" },  
  2.         function(data){  
  3.             alert(data.name); // John  
  4.             console.log(data.time); //  2pm  
  5.         }, "json");  

 

 

JavaScript Code复制内容到剪贴板
  1. var 类名 = {    
  2.    变量名:变量值,    
  3.    函数名:function(参数){    
  4.           处理内容;    
  5.     }    
  6. };    

 

 

本文来自于：http://www.yoyo88.cn/note/frontend/42.html

上一篇 Sublime Text添加插入带当前时间说明
下一篇 JavaScript HTML DOM 事件
相关的文章
Powered by yoyo苏ICP备15045725号