php使用ajax无刷新从接口获取数据更新填充表单

这几天再写一个网站的数据抓取功能,改好了将一部分记录下,使用的thinkphp框架写的,直接上干货代码参考

在Index控制内添加一个获取数据的方法(这里仅做参考,直接将获取的数据写成数组,中间过程省略......):

public function dbinfo(){
    $data = array("name","pass");
    $dbinfo = json_encode($data);
    echo $dbinfo;
}

模版内容如下:

<form>
<input type="button" id="btn" value="获取" /><br />
<input type="text" id="title" name="name" value="" /><br />
</form>
<script type="text/javascript">
$(function(){
    $("#btn").click(function(){
    $.get("{:U('Index/dbinfo')}",
    function(data){
        //alert(data);
        var arr = eval(data);
        //alert(arr[0]);
        $("#title").val(arr[0]);
    });
});
});
</script>

写的很简单,没有带参数,如果需要带参数在$.get的括号内写上,例如&catid=1&id=1,就在提交的地址后面加上,“, { catid:1 , id:1}”

js代码就改为:

<script type="text/javascript">
$(function(){
    $("#btn").click(function(){
    $.get("{:U('Index/dbinfo')}", { catid:1 , id:1},
    function(data){
        //alert(data);
        var arr = eval(data);
        //alert(arr[0]);
        $("#title").val(arr[0]);
    });
});
});
</script>

从控制器上返回接口json数据不要用return而是需要使用echo,js方法下的返回data数据需要使用eval方法把数据转换为js的数组。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://sulao.cn/post/373.html