ThinkPHP中ajax使用实例教程

前端技术 2023/09/09 PHP

本文实例讲述了ThinkPHP中使用ajax的方法，提交表单如下图所示：

点击提交，不需要刷新本页，将内容提交到数据库当中，并在本页显示提交的内容。如下图所示：

一、jquery实现方法：

MessageAction.class.php页面代码如下：

<?php
class MessageAction extends Action{
  
  function index(){
    $this->display();  
  }
  
  function add(){
    //ajaxReturn(数据,\'提示信息\',状态)  
    $m=M(\'message\');
    if($m->add($_GET)){
      $this->ajaxReturn($_GET,\'添加信息成功\',1);
    }else{
      $this->ajaxReturn(0,\'添加信息失败\',0);  
    }
  }
 
}
?>

模板index.html代码如下：

<html>
<head>
<script type=\"text/javascript\" src=\"__PUBLIC__/js/jquery-1.7.1.min.js\"></script>
<script type=\"text/javascript\">
  $(function(){
    $(\'input:button\').click(function(){
      var $title=$(\'input[name=\"title\"]\').val();
      var $message=$(\'input[name=\"message\"]\').val();
      $mess=$(\'#mess\');
      $.getJSON(\'__URL__/add\',{title:$title,message:$message},function(json){
        //alert(json);return false;
        if(json.status==1){
          $mess.slideDown(3000,function(){
            $mess.css(\'display\',\'block\');  
          }).html(\'标题为\'+json.data.title+\'信息为\'+json.data.message);  
        }else{
          $mess.slideDown(3000,function(){
            $mess.css(\'display\',\'block\');  
          }).html(\'信息添加失败，请检查\');  
        }    
      });
    })  
  })
</script>
</head>
<body>
<div style=\"display:none; color:red;\" id=\"mess\"></div>
<form action=\"\" method=\"get\">
 标题：<input type=\"text\" name=\"title\" /><br />
 信息：<input type=\"text\" name=\"message\" /><br />
    <input type=\"button\" value=\"提交\" />
</form>
</body>
</html>

二、ThinkPHP实现方法：

MessageAction.class.php页面代码如下：

<?php
class MessageAction extends Action{
  
  function index(){
    $this->display();  
  }

  function addtwo(){
    $m=M(\'message\');
    if($vo=$m->create()){
      if($m->add()){
        $this->ajaxReturn($vo,\'添加成功\',1);  
      }else{
        $this->ajaxReturn(0,\'添加失败\',0);  
      }  
    }else{
      $this->error($m->getError());  
    }
  }
}
?>

模板index.html代码如下：

<html>
<head>
<script type=\"text/javascript\" src=\"__PUBLIC__/Js/Base.js\"></script>
<script type=\"text/javascript\" src=\"__PUBLIC__/Js/prototype.js\"></script>
<script type=\"text/javascript\" src=\"__PUBLIC__/Js/mootools.js\"></script>
<script type=\"text/javascript\" src=\"__PUBLIC__/Js/ThinkAjax.js\"></script>
<script type=\"text/javascript\">
  function add(){
    //ThinkAjax.sendForm(表单ID,URL,回调函数,信息显示的地方);
    ThinkAjax.sendForm(\'frm\',\'__URL__/addtwo\',wc);  
  }
  function wc(data,status){
    if(status!=1){
      alert(\'发送失败\');
    }else{
      $(\'list\').innerHTML+=\'标题\'+data.title+\',信息\'+data.message;  
    }  
  }
</script>

</head>
<body>
<div id=\"list\"></div>
<form action=\"\" method=\"POST\" id=\"frm\">
 标题：<input type=\"text\" name=\"title\" /><br />
 信息：<input type=\"text\" name=\"message\" /><br />
    <input type=\"button\" value=\"提交\" onClick=\"add()\" />
</form>
</body>
</html>

感兴趣的朋友可以测试运行一下本文所示实例，可以加深对Ajax应用的理解。

本文地址：https://www.stayed.cn/item/23973

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案