AJAX+tp5+JQ

今天写到了前后端数据交换。虽然TP5自带了paging非常好用,可以自动用render分页,但是每次换页都会刷新页面,非常难受。
为此,开始用更加好用的AJAX技术,在这里做一个小总结。
首先我在服务器中设置好了响应文件,读取数据库信息后,取出需要返回前端的信息,转换成JSON格式供前端的AJAX去访问。

数据获取和解析

public function my_ajax()
{
    $a[]="";
    //获取数据
    $data = User::get(1);
    //打包数据
    $a["name"]=$data["name"];
    $a["password"]=$data["password"];
    $res = json_encode($a);
    return $res;
}

对于AJAX来说,用JS原生去写的方法就不累赘了,也没必要重复造轮。但还是建议熟悉一下这个技术的使用前提和响应流程。
回归重点,JQ里面封装了许多AJAX相关的函数,这里我只举个例子。
首先是$.get(),这个非常好用。

function my_ajax(){
    $.get("/admin/index/my_ajax",function (data,status){
        $.each($.parseJSON(data),function (index,value) {
            $("#input_text")
            .append("<br>index:"+index+" value:"+value);
        }); 
        });
}

解释一下,这里有一个基本功的需要注意下,因为没有做数据类型的设置,并且数据是以字符串的形式返回,所以需要转换为对象。

$.parseJSON(data)//将JSON格式的数据转换为JavaScript可接受形式

更多函数的使用就去查询这个把
JQ-AJAX介绍https://www.runoob.com/jquery/jquery-ajax-get-post.html
然后 还有一个JQ对指定元素加入数据的函数,$.prop,比如我这里判断取来的数值后让单选框选择对应默认值

$("#isMerchant").prop('checked', true);

这样就能让单选框加上checked属性。

AJAX数据发送

想要发送数据,就需要现在HTML里获取各种输入框的数据。这里展示一下文本框 < input type=‘text’ id=‘t1’> 的获取方法。

$data = $("#t1").val();

获取某组单选按钮的被选择按钮值时,例如按钮组是
< input type=“radio” name=“merchant”>

$merchant = $("input[name='merchant']:checked ").val();

就可以获得被选择的那个按钮设定的值。
接下来就是通过JQ的$.post()函数发送数据,我在我的TP配置文件中设置的是接收JSON数据,当然也可以设置成XML,只是解析起来麻烦点:

// 方法参数 $.post(URL,data,callback);
// data 为 JSON 格式
function post_data(){
$merchant = $("#mc input[name='merchant']:checked ").val();
$data = {"merchant":$merchant};
$.post("update", $data, function (data,status) {
    $("#postText").val("状态:"+status+"数据:"+data);
});
}

其中的"update" 是我在TP5同模块下定义的一个操作方法。跨模块的话需带上 “模块名/控制器/操作方法” 这种方式。
那么在服务器端的被访问文件就可以通过获取POST数据方法对这些数据做一些处理了。
到这里,面向API也就实现了。参考:https://www.jb51.net/article/146732.htm


------------------------------------ end ---------------------------------


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值