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 ---------------------------------

---