前台实现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

前台实现ajax 需注意的地方相关推荐

前台发送 ajax 请求到后台传递数组参数
前台发送 ajax 请求到后台,发现直接传递数组,后台是接收不到的,需要 ajax 加上一个 traditional 属性 var arr = ["a","b" ...
spring返回数据使用ajax,【spring 后台跳转前台】使用ajax访问的后台，后台正常执行，返回数据，但是不能进入前台的ajax回调函数中...
问题1: 使用ajax访问的后台,后台正常执行,并且正常返回数据,但是不能进入前台的ajax回调函数中问题展示: 问题解决: 最后发现是因为后台的方法并未加注解:@ResponseBody,导致方法 ...
aspx后台调用前台jquery_Jquery Ajax调用aspx页面方法
在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通过aspx.cs中的静态方法+WebMethod进 ...
Ajax：前台利器—Ajax
[前言] 跨新年将王兴魁老师的Ajax的十三个视频进行了学习,与此同时也通过书籍或网上查阅了些关于Ajax的资料.早就听闻Ajax鼎鼎大名,之前在项目中也对它的强大功能领教一二,近几日深入走近它的世界 ...
Asp.Net MVC WebAPI的创建与前台Jquery ajax后台HttpClient调用详解
1.什么是WebApi,它有什么用途? Web API是一个比较宽泛的概念.这里我们提到Web API特指ASP.NET MVC Web API.在新出的MVC中,增加了WebAPI,用于提供REST ...
js中图片显示用ajax,javascript - 前台用ajax上传图片，怎么让图片上传完成显示的缩略图片的时候显示分辨率大小...
以下是相关代码,现在就是上传上去想让显示以下分辨率,也就是图片的大小,请问应该怎么该才可以,求解答前台上传文件代码 window.οnlοad=function(){ var type=docume ...
PhoneGap工作原理及需改进的地方（转）
PhoneGap是目前最被看好的: 兼容性:完全做到了Written Once,Run Everywhere! 标准化:PhoneGap采用W3C标准,Web App直接运行! 采用普通web开发技术 ...
安装oracle需注意的地方
Oracle安装完后,需要在Oracle用户中设置环境变量: ORACLE_HOE ORACLE_SID=ora11g 若没有设置ORACLE_SID的话,登录失败,显示"ORA-12162 ...
this.$router.push用query传参对象时需注意的地方
在vue项目中,我们用函数式编程this.$router.push跳转,用query传递一个对象时要把这个对象先转化为字符串,然后在接收的时候要转化为对象,要不然会接收不到参数.要不就把参数分开传递, ...
上架三星应用商店需注意的地方
APP上架三项应用商店的时候,有一个三星特别推荐,选中这个后就需要在自己的项目中添加 <uses-permission android:name="com.samsung.androi ...

前台实现ajax 需注意的地方

前台实现ajax 需注意的地方相关推荐

最新文章

热门文章