最近在做项目时遇到了一些需要从页面用ajax提交数据到后台的操作,无奈本人技术有限,网上苦寻,研究了一下ajax和thinkPHP的结合,黄天不负苦心人,终于搞定了。

摘要:ThinkPHP是一个小型网站很常用的低端框架,但是不专业的文档和编码导致使用者很容易只知其表不知其里。这里仅就官方文档中未曾提及的在thinkphp中使用jquery实现ajax异步交互略作总结。

闲话少叙,进入正题:我需要从页面中的一系列列表中,提交数据id到后台,然后从后台接收id数据,然后进行操作。

环境:ThinkPHP3.2.3,jQuery

$.ajax({                          type:"GET",                          url:"__URL__/DelBatch",                          data:{id:ids},                          dataType: "json",                          success:function(ss){                              alert(ss);                          }                      });

阅读目录:

 

正文:

参数解析:

在一般的网站中,都需要用到jquery或者其他框架(比如angular)来处理前后端数据交互。在thinkphp在后台也内置了一些函数用于数据交互(比如ajaxReturn())。本文的目的是打通jquery ajax到thinkphp的前后端数据交互过程。

  type:表示请求的方式,post或get,默认为get。

前言:

  url:数据所要提交到的url地址。

一、thinkphp关于ajax的介绍

  data:表示所要提交的数据。JSON格式(键值对)。代码中第一个id表示变量名,第二个ids表示具体的值,即第一个id变量所对应的值。

1.1 ajaxReturn:

  dataType:预期服务器返回的数据类型。若不指定,jquery将自动根据http包MIME信息来智能判断(w3c抄袭,具体不懂,大概是根据MIME的类型来返回值的类型)

\Think\Controller类提供了ajaxReturn方法用于AJAX调用后返回数据给客户端(视图、模板、js等)。并且支持JSON、JSONP、XML和EVAL四种方式给客户端接受数据(默认JSON)。(链接:http://document.thinkphp.cn/manual\_3\_2.html\#ajax\_return

  success:请求成功后后调用的回调函数。

配置方式:convention.php中定义了默认编码类型为DEFAULT_AJAX_RETURN =>  ‘JSON’,

ajax请求数据还有很多参数,比如beforeSend、error等,大家若想详细了解可以上网去查。

分析:ajaxReturn()调用了json_encode()将数值转换成json数据存储格式,常用的数值是数组。

有了这段代码,用户在执行点击等操作时就可以将数据以get的方式提交到后台。

注意:The value being encoded can
be any type except a resource(资源文件).All string data must be UTF-8
encoded.(链接:http://php.net/manual/en/function.json-encode.php

 

举例:

后台数据接收:

$data[‘status’]  = 1;

function DelBatch(){                  if(IS_GET)          {              $id=$_GET["id"];              $this->ajaxReturn($id);          }                }

$data[‘content’] = ‘content’;

 

$this->ajaxReturn($data);

thinkPHP中具有对请求类型进行判断的封装,其中具有对几种请求类型的判断:

1.2 请求类型:

  IS_POST:判断是否是POST方式提交

系统内置了一些常量用于判断请求类型,比如:

  IS_GET:判断是否是GET方式提交

常量 说明

  IS_AJAX:判断是否是ajax方式提交

IS_GET 判断是否是GET方式提交

public function check(){      if(IS_GET){          //若是,执行响应操作      }      else{          $this->error("非法请求!");      }  }

IS_POST 判断是否是POST方式提交

在上述代码中,首先进行了请求类型的判断,若请求一致,则进行相应操作,否则,显示当前请求为非法请求。

IS_PUT 判断是否是PUT方式提交

插入一段,回到正题:

IS_DELETE 判断是否是DELETE方式提交

在后台接收数据时,首先同样进行了请求的判断。然后通过$id=$_GET[“id”]得到页面提交过来的数据,然后进行数据返回。

IS_AJAX 判断是否是AJAX提交

ThinkPHP对ajax有很好的支持,系统\Think\Controller类中提供了ajaxReturn方法用于对ajax调用后返回数据给客户端,支持JSON,JSONP,XML和EVAL四种方式返回数据的类型。默认采用JSON格式返回数据。

REQUEST_METHOD 当前提交类型

开始做时,仅仅在方法中echo了一个数据出来,苦思半天,以为在提交数据时没有找到相应方法,其实不然,thinkPHP封装了ajaxReturn方法,专门用于将数据返回供页面使用。所以,在页面的success的function中接收到数据,然后将数据alert显示。

目的:一方面可以针对请求类型作出不同的逻辑处理,另外一方面可以过滤不安全的请求。
(链接:http://document.thinkphp.cn/manual\_3\_2.html\#request\_method

威尼斯人线上娱乐 1

使用方法:

随笔一篇,记录一下,希望对大家有所帮助。

class UserController extends Controller{

 

     public function update(){


         if (IS_POST){

             $User = M(‘User’);

             $User->create();

             $User->save();

             $this->success(‘保存完成’);

         }else{

             $this->error(‘非法请求’);

         }

     }

}

1.3 跳转和重定向:

功能比较鸡肋,在ajax异步交互局部刷新中,不需要有文字提示的跳转。(链接:http://document.thinkphp.cn/manual\_3\_2.html\#page\_jump\_redirect

 

二、jQuery Ajax的介绍:

2.1 官网关于jQuery.ajax()的介绍

jQuery.ajax() 方法用于执行 AJAX(异步 HTTP)请求。(链接:http://www.jquery123.com/jQuery.ajax/

语法:$.ajax({name:value,
name:value, … }),该参数规定
AJAX 请求的一个或多个名称/值对。

常见参数:

type (默认: ‘GET’)

类型: String

请求方式 (“POST” 或 “GET”), 默认为 “GET”。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。

url (默认: 当前页面地址)

类型: String

发送请求的地址。

async (默认: true)(1.8版本已弃用)

类型: Boolean

默认设置下,所有请求均为异步请求(也就是说这是默认设置为
true )。如果需要发送同步请求,请将此选项设置为
false 。

data

类型: Object, String

发送到服务器的数据。将自动转换为请求字符串格式。GET
请求中将附加在 URL 后面。查看 processData 选项说明,以禁止此自动转换。对象必须为”{键:值}”格式。如果这个参数是一个数组,jQuery会按照traditional 参数的值,
将自动转化为一个同名的多值查询字符串(查看下面的说明)。注:如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。

dataType (默认: Intelligent Guess (xml, json, script, or
html))

类型: String

预期服务器返回的数据类型。如果不指定,jQuery
将自动根据 HTTP 包 MIME 信息来智能判断,比如XML MIME类型就被识别为XML。在1.4中,JSON就会生成一个JavaScript对象,而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。举例:

“json”: 把响应的结果当作 JSON 执行,并返回一个JavaScript对象。在 jQuery 1.4 中,JSON 格式的数据以严格的方式解析,如果格式有错误,jQuery都会被拒绝并抛出一个解析错误的异常。(见json.org的更多信息,正确的JSON格式。)

error

类型: Function( jqXHR jqXHR,
String textStatus, String errorThrown )

请求失败时调用此函数。有以下三个参数:jqXHR
(在 jQuery 1.4.x前为XMLHttpRequest) 对象、描述发生错误类型的一个字符串 和
捕获的异常对象。如果发生了错误,错误信息(第二个参数)除了得到null之外,还可能是”timeout”, “error”, “abort” ,和 “parsererror”。 当一个HTTP错误发生时,errorThrown 接收HTTP状态的文本部分,比如: “Not Found”(没有找到) 或者 “Internal Server Error.”(服务器内部错误)。 从jQuery 1.5开始, 在error设置可以接受函数组成的数组。每个函数将被依次调用。
注意:此处理程序在跨域脚本和JSONP形式的请求时不被调用。这是一个 Ajax Event。

success

类型: Function( Object data,
String textStatus, jqXHR jqXHR )

请求成功后的回调函数。这个函数传递3个参数:从服务器返回的数据,并根据dataType参数进行处理后的数据,一个描述状态的字符串;还有 jqXHR(在jQuery 1.4.x前为XMLHttpRequest) 对象 。在jQuery 1.5,
成功设置可以接受一个函数数组。每个函数将被依次调用。这是一个
Ajax Event

其他jQuery-ajax-settings,详见:http://www.jquery123.com/\#jQuery-ajax-settings

 

举例:

在js中把id作为数据发送到服务器,
保存一些数据到服务器上, 一旦请求完成就通知用户。
 如果请求失败,则提醒用户。

var menuId = $(“ul.nav”).first().attr(“id”);

var request = $.ajax({

  url: “script.php”,

  type: “POST”,

  data: {id : menuId},

  dataType: “html”

});

request.done(function(msg) {

  $(“#log”).html( msg );

});

request.fail(function(jqXHR, textStatus) {

  alert( “Request failed: ” + textStatus );

});

注意:此处也可以在ajax()中使用success和error参数判断请求结果成功还是失败,并执行下一步操作。

 

2.2 js与json

2.2.1 json是什么:

JSON:JavaScript 对象表示法(JavaScript Object Notation)。是独立于语言之外的存储和交换文本信息的语法。

2.2.2 json和ajax的关系?

在上面关于jquery.ajax的介绍中提到了,json可以作为一个ajax函数的dataType,这样数据就会通过json语法传输了。(链接:http://www.cnblogs.com/haitao-fan/p/3908973.html

在jquery的ajax函数中,只能传入3种类型的数据:(链接:http://www.cnblogs.com/haitao-fan/p/3908973.html

>1.json字符串:”uname=alice&mobileIpt=110&birthday=1983-05-12″

>2.json对象:{uanme:’vic’,mobileIpt:’110′,birthday:’2013-11-11′}

>3.json数组:

[

    {“name”:”uname”,”value”:”alice”},

    {“name”:”mobileIpt”,”value”:”110″},   

    {“name”:”birthday”,”value”:”2012-11-11″}

]

2.2.3 json的编解码和数据转换:

2.2.2中提到的json对象是更方便与js数组、js字符串或php数组、php字符串进行数据转化的json类型。下面以json对象为例讲解一下json对象与js和php的数据类型转化。

json对象转化成数组:

<script type=”text/javascript”>

        var jsonStr =
‘[{“id”:”01″,”open”:false,”pId”:”0″,”name”:”A部门”},{“id”:”01″,”open”:false,”pId”:”0″,”name”:”A部门”},{“id”:”011″,”open”:false,”pId”:”01″,”name”:”A部门”},{“id”:”03″,”open”:false,”pId”:”0″,”name”:”A部门”},{“id”:”04″,”open”:false,”pId”:”0″,”name”:”A部门”},
{“id”:”05″,”open”:false,”pId”:”0″,”name”:”A部门”},
{“id”:”06″,”open”:false,”pId”:”0″,”name”:”A部门”}]’;

      //  var jsonObj = $.parseJSON(jsonStr);

      var jsonObj =  JSON.parse(jsonStr)

        console.log(jsonObj)

     var jsonStr1 = JSON.stringify(jsonObj)

     console.log(jsonStr1+”jsonStr1″)

     var jsonArr = [];

     for(var i =0 ;i < jsonObj.length;i++){

            jsonArr[i] = jsonObj[i];

     }

     console.log(typeof(jsonArr))

    </script>

想要将表单数据提交到后台,需要先从表单获取数据/数据集:

serialize和serializeArray的区别是serialize()获取到序列化的表单值字符串,serializeArray()以数组形式输出序列化表单值。举例:

var serialize_string=$(‘#威尼斯人线上娱乐,form’).serialize();

得到:a=1&b=2&c=3&d=4&e=5

var serialize_string_array=$(‘#form’).serializeArray();

得到:

[

  {name: ‘firstname’, value: ‘Hello’},

  {name: ‘lastname’, value: ‘World’},

  {name: ‘alias’}, // 值为空

]

相对来说,serializeArray()和最终想要得到的json数组更加相似。只不过需要将包含多个name-value形式json对象的json数组改写成’first_name’:’Hello’形式的json对象。

下面有两种转换方法:http://blog.jdk5.com/zh/convert-form-data-to-javascript-object-with-jquery/

这里使用第二种方法举例,可以起名为change_serialize_to_json():

var data = {};

$(“form”).serializeArray().map(function(x){

if (data[x.name] !== undefined) {

        if (!data[x.name].push) {

            data[x.name] = [data[x.name]];

        }

        data[x.name].push(x.value || ”);

    } else {

        data[x.name] = x.value || ”;

    }

});

输出:{“input1″:””,”textarea”:”234″,”select”:”1″}

 

完整流程:

网站地图xml地图