前台实现ajax 需注意的地方

标签：

0x01.

使用jquery中的 $.post() /$.get() /$.ajax() /$.load() 这是常用的四种ajax与后台交互的方法

大致思路：

前台js触发事件 调用jquery函数，向后台提交参数，后台处理数据，返回数据结果集（json格式），前台接送处理需要的信息 赋值到前台页面显示。

1.前台事件

click:鼠标的点击事件 应用范围：按钮， 表单提交。。。

onchange:下拉列表value值的改变 <select><option value=""></select>

...

2.js函数的调用

...

$(function(){

　　$("button").click(function(){

　　　　var data= $("#form").val(); //接收的数据 可能是一个或多个

　　　　$.load("url","data",function(response,status){

　　　　　　if(status=="success"){

　　　　　　　　#处理json数据 赋值到html页面中

　　　　　　}

　　　　　　if(status=="error"){

　　　　　　　　#错误信息

　　　　　　}

　　　　});

　　})

})

这里 如果是<select> 中的change事件

修改为$(function(){

　　　　$("#select").change(function(){

　　　　　　#....

　　　　})

})

3.后端返回json 数据

public function ajax(){

　　.....

　　$data["id"]="";

　　$data["name"]="";

　　$this->ajaxReturn($data); //这里直接调用thinkPHP中的方法

}

数据格式：

单个数据：{"id":"1","name":"xxx"} 

多个数组数据:{"0":["id":"1","name":"xx"],"1":["id":"2","name":"xxx"],...,}

有时还会带状态信息：{"0":["id":"1","name":"xx"],"1":["id":"2","name":"xxx"],...,"refer":"","state":""}

0x02.

处理json数据 遍历

...

前台实现ajax 需注意的地方

标签：

原文地址：http://www.cnblogs.com/developd/p/4485432.html