首先,个人可以在本地搭建服务器环境,就是像在本地搭建网站前的第一个工作,基于php+mysql集成包有phpnow,wampserver等;
其次,有个编辑器吧,sublime,notepad,editplus,dreamweaver等等都可以;
然后,百度一下Jquery,去官网下载个Jquery库就ok了,然后放在同目录下调试就会相对方便;
学Jquery的好处,代码简洁易用,做SEO的绝对够用了,非得用Javascript也只是重复机械性工作罢了(知乎上面的大神说的);
Jquery各式各样的选择器,几乎就跟CSS的用法一模一样,用过都说好.
下面是Jquery实现ajax最简单的代码,具体html放的地方可以百度解决,只为记录学习的点滴,蔸雨seo博客原创,未经允许不得转载!
一、简单请求url地址,load()方法:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax</title> <style type="text/css"> .load{width:600px; height: 600px; border: 1px solid #abcdef;} </style> <script src='jquery.js' type="text/javascript"></script> <!--引入Jquery库--> </head> <body> <input type="button" value="加载"/> <div class="loading"></div> <script> $('input[type=button]').click(function(){ $('.loading').load('06-ajax.txt?data='+Math.random()); //Math.random()解决浏览器缓存问题,06-ajax的txt文件随便写点什么就OK,使用的是load方法 }); </script> </body> </html>
二、实现和ajax交互,不但请求数据,并接受数据:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax-html</title> <script src="jquery.js" type="text/javascript"></script> <style type="text/css"> div{color:red;} </style> </head> <body> <input type="text" name="username" id="username"/> <input type="button" value="检验" /> <div></div> <script type="text/javascript"> $('input[type=button]').click(function(){ //$('div').load('test.txt?data='+Math.random()); //发送的参数格式必须是json格式 var send={'username':$('#username').val()} //json格式,js中的对象,python中的字典 $('div').load('test.php',send,function(data){ //发送数据,send后面是回调函数,用来接收数据,最后直接放到div alert(data); }); }); </script> </body> </html>
三、使用$.get()和$.post()方法:(一样的做操作)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax-html</title> <script src="jquery.js" type="text/javascript"></script> <style type="text/css"> div{color:red;} </style> </head> <body> <input type="text" name="username" id="username"/> <input type="button" value="检验" /> <div></div> <script type="text/javascript"> var url='test.php'; var data={'username':$('#username').val()}; $('input[type=button]').click(function(){ $.get(url,data,function(data){ if (data=='true') { $('div').html('用户名可以注册'); }else{ $('div').html('用户名不能使用admin'); }; }); }); </script> </body> </html>
四、使用$.ajax()方法:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax-html</title> <script src="jquery.js" type="text/javascript"></script> <style type="text/css"> div{color:red;} </style> </head> <body> <input type="text" name="username" id="username"/> <input type="button" value="检验" /> <div></div> <script type="text/javascript"> $('input[type=button]').click(function(){ var url='test.php'; //声明变量,不要放在这个function的上面会出问题 var data={'username':$('#username').val()}; $.ajax({ //.ajax()格式就这样写的,有编程经验的好点 url:url, //请求的url type:'get', //请求方式 data:data, //发送的数据 success:function(data){ //回调函数 if(data=='true'){ $('div').html('用户名可以使用'); }else{ $('div').html('用户名不能使用admin'); } } }); }); </script> </body> </html>
最后test.php脚本
<?php header('Content-type:text/html;chartset=utf-8'); //声明头部 //$username=$_POST['username']; //POST方式接收 $username=$_GET['username']; //GET方式接收 if($username=='admin'){ echo 'false'; //输出 }else{ echo 'true'; } ?>
以上所有的test.php都是同一个,post的时候改成用post就ok!
蔸雨seo博客原创,未经允许不得转载,谢谢!
看看!
看看!
Happy New Year.