前台实现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数据 遍历

...

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