这是一个网站的登录功能，我们通过ajax(可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页)加载服务器数据的过程再来体验一下前后台数据交互的过程。

　　我们先给登录名和登录密码的文本框起两个名字，即UserName，PassWord。

　　前端代码(解析)如下：

　　$.ajax({

　　‘url’:’login.php’, #和之前的URL一样，前端把参数传递到什么位置

　　‘data’:{“username”:$(‘#UserName’).val(),”PassWord”:$(‘#password’).val(),}, #前端传递给后端的数据(用户名和密码)

　　‘success’:function(data){

　　} #服务器返回数据成功的时候，前端需要如何操作(data中存的就是服务器返回的数据)

　　‘type’:’post’ #数据传输的方法

　　‘dataType’:’json’ #传递数据的类型，JSON

　　});

　　我们不用关心function(data)函数中具体的代码，无非就是：前端页面展示用户的用户名、页面状态变为已登录、展示用户相关数据等。

　　后端代码过于复杂，我就不展示了，总之后端要做的处理就是：拿到前端传递过来的数据(用户名和密码)和数据库中用户信息做比对，如果一致则返回给前台一个状态，并且返回用户的相关数据(昵称、个人信息、购物车信息、收藏的商品等等)，这些数据同样是以JSON的形式传回给前端。如果用户名或密码不一致，也返回给前端一个状态。前端根据得到的状态做出页面的相应效果：登录按钮变为退出、显示用户昵称、显示购物车信息、显示收藏信息、登录框隐藏等，如果用户名密码不匹配则显示相应的提示信息。

　　以上就是网站通过ajax技术完成的前后端数据交互过程。

　　你学会了吗?