博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前台实现ajax 需注意的地方
阅读量:4326 次
发布时间:2019-06-06

本文共 1052 字,大约阅读时间需要 3 分钟。

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

你可能感兴趣的文章
考勤系统之计算工作小时数
查看>>
4.1 分解条件式
查看>>
Equivalent Strings
查看>>
flume handler
查看>>
收藏其他博客园主写的代码,学习加自用。先表示感谢!!!
查看>>
H5 表单标签
查看>>
su 与 su - 区别
查看>>
C语言编程-9_4 字符统计
查看>>
在webconfig中写好连接后,在程序中如何调用?
查看>>
限制用户不能删除SharePoint列表中的条目(项目)
查看>>
【Linux网络编程】使用GDB调试程序
查看>>
feign调用spring clound eureka 注册中心服务
查看>>
ZT:Linux上安装JDK,最准确
查看>>
LimeJS指南3
查看>>
关于C++ const成员的一些细节
查看>>
《代码大全》学习摘要(五)软件构建中的设计(下)
查看>>
C#检测驱动是否安装的问题
查看>>
web-4. 装饰页面的图像
查看>>
微信测试账户
查看>>
Android ListView上拉获取下一页
查看>>