tp框架实现ajax

最新推荐文章于 2025-09-07 12:15:11 发布

weixin_30872671

最新推荐文章于 2025-09-07 12:15:11 发布

阅读量106

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml json javascript ViewUI

原文链接：http://www.cnblogs.com/u1020641/p/6228382.html

本文通过一个简单的下拉列表示例介绍了TP框架中如何使用AJAX进行前后端交互。前端利用jQuery发起请求，后端则处理请求并返回JSON格式的数据。

不墨迹，直接进主题。

tp框架实现ajax

首先，我们先做一个testajax.html用来显示页面（只是一个简单的下拉列表^_^）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="__PUBLIC__/js/jquery-1.11.2.min.js"></script>
</head>

<body>
<select id="rules">
</select>

</body>
</html>

接下来我们要去操作后台页面

//ajax
public function testajax()
{
    $this->show();    //输入地址显示页面
}
    
public function ajaxchuli()
{
    $n = D("rules");    //造父类
    $attr = $n->select();        //查询
    
    $this->ajaxReturn($attr);        //可修改参数，默认是JSON
}

咳咳，说好的ajax呢？ (┬＿┬)

好吧，其实html界面的全部代码是这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="__PUBLIC__/js/jquery-1.11.2.min.js"></script>
</head>

<body>
<select id="rules">
</select>

<script type="text/javascript">
    $.ajax({
        url:"__COMTROLLER__/ajaxchuli",        <!--后台处理路径-->
        data:{},
        type:"POST",
        dataType:"JSON",
        success: function(data){
            
            var str = "";
            for(a in data)
            {
                str = str+"<option value='"+data[a].code+"'>"+data[a].name+"</option>";
            }
            
            $("#rules").html(str);
            
            }
        })
</script>
</body>
</html>