Ajax学习心得by WuBin 武斌

个人在学习ajax的时候的一点小小的记录。

首先引入jquery文件:

<script type="text/javascript" src="__PUBLIC__/libs/jquery/1.x/jquery-1.11.3.min.js"></script>

然后实现ajax向数据库发送数据:

方法一:采用getJSON

	<script type="text/javascript">
	  $(function(){
	    $('input:button').click(function() {
	      /* Act on the event */
	      var title = $('input[name="title"]').val();
	      var message = $('input[name="message"]').val();
	      // alert(title+message);
	      $.getJSON("{:U('Home/project/add')}", {'title':title,'message':message}, function(data){
	          alert(data.status);
	        })
	      })
	  })
	</script>

方法二:采用ajaxSubmit,需要引入jquery.form.js

<script type="text/javascript">
  $(document).ready(function(){
    $('#btn').click(function(){
        $('#registerForm').ajaxSubmit(function(data){
          alert(data);
        });
        return false;
    });
  });
</script>

方法三:jqurey的ajax

<script type="text/javascript">
  $(function(){
    $('input:button').click(function(){
      var title = $('input[name="title"]').val();
      var message = $('input[name="message"]').val();
      var request = $.ajax({
        url:"{:U('Home/project/add')}",
        method: "POST",
        data:{'title' : title, 'message':message}
      });
      request.done(function(data){
        alert(data.title);
      })
    })
  })
</script>

html代码部分

<form>
 标题:<input type="text" name="title" /><br />
 信息:<input type="text" name="message" /><br />
<input type="button" value="提交" />
</form> 

ThinkPHP部分

public function add(){
        //ajaxReturn(数据,'提示信息',状态)  
        if($_POST){
            $_POST['status'] =1;
            $this->ajaxReturn($_POST);
        }else{
            $this->ajaxReturn(0);
        }
 }

参考网站

1. jQuery ajax中使用serialize() 方法提交表单数据

2. jQuery

3. ajaxForm和ajaxSubmit提交From的区别

4. 初识jQuery的ajax

5. JQuery的ajax学习笔记

Published 15 September 2015