zoukankan      html  css  js  c++  java
  • 前台实现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数据 遍历

    ...

  • 相关阅读:
    分页存储过程
    调存储过程
    winform httplicent调用API
    存储过程,触发器,等等。。。
    C# AJAXform上传图片
    Mysql order by与limit联用出现的问题
    将Sublime Text 3 放到右键中
    Vue-cli构建步骤
    Javascript面试知识点
    position详解
  • 原文地址:https://www.cnblogs.com/developd/p/4485432.html
Copyright © 2011-2022 走看看