Example tutorial on using ajax in ThinkPHP, thinkphpajax

Example tutorial on using ajax in ThinkPHP, thinkphpajax_PHP tutorial

WBOY

Release： 2016-07-13 10:20:05

Original

1030 people have browsed it

Ajax usage example tutorial in ThinkPHP, thinkphpajax

The example in this article describes the method of using ajax in ThinkPHP. The submission form is as shown below:

Click submit, there is no need to refresh this page, the content will be submitted to the database, and the submitted content will be displayed on this page. As shown below:

1. jquery implementation method:

MessageAction.class.php page code is as follows:

<&#63;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);  
    }
  }
 
}
&#63;>

Copy after login

The template index.html code is as follows:

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

Copy after login

2. ThinkPHP implementation method:

MessageAction.class.php page code is as follows:

<&#63;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());  
    }
  }
}
&#63;>

Copy after login

The template index.html code is as follows:

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

Copy after login

Interested friends can test and run the example shown in this article to deepen their understanding of Ajax applications.

think how to do ajax interaction in php. Is there any simple and easy-to-understand example? I would be grateful

thinkphp has its own ajax method, which is very simple to use and convenient for interaction. Give an example and you will understand.
First include the required js (available for download from his official website), and modify the path yourself.

Then, for example, here is an ordinary non-refresh verification of user name repetition:
//First place an information prompt:

//Then there is the input box, click to determine whether the user name already exists

//Then the JS
function checkUser(){
ThinkAjax.send('/User/chkUser','ajax=1&username ='+$('username').value,'','result');
}
//The first parameter is the program page for submission processing, the second is the passed parameter value, the Three are the functions returned after successful return (empty here), and the fourth is the location where the value is returned (that is, the id="result" set before)

Finally, there is only one program processing page left. User/chkUser
class UserAction exte...The rest of the text>>

How to receive the return value of ajax using jquery in Thinkphp?? As shown in the picture:

The parameters in your callback function are written incorrectly
Write like this
alert(dd.data);

You don’t understand the data format returned by ajaxReturn
You can access is_user directly through the browser You can see