色篇—梨花

摘要:ThinkPHP是一个袖珍网站大常用之低端框架,但是不正规的文档和编码导致使用者很易就略知一二那说明不亮堂那里。这里就就合法文档中从不提及的在thinkphp中行使jquery实现ajax异步交互略发总结。

       
在自记忆里,从未观察过梨花。但桃花见得可怜多,扬州瘦西湖素来产生“三步一桃、五步同等柳树”的说教,而梨树却少之又少。真正被我仿佛的梨花的,是这次的清明节。

环境:ThinkPHP3.2.3,jQuery

       
梨花,蔷薇科梨属,梨树的花。吃了众多梨:水晶梨、黄梨、丑梨……因植物学知识有限,也只好于相起名叫了。但梨花却从没多见,这次悄然偶遇“梨花节”,成片的梨花让自己挺是震撼。几步走上前,满眼所见底远在居然梨树,整齐的为人口咂舌。不怎细数,少说为如百来颗。梨花,素白单瓣、偶尔重叠,花蕊单色嫩黄,蕊心泛着乌黑,沾少许花粉。拈来放置鼻前,深吸一口,却清淡无香,只留植物本有的青涩味。梨树与桃树一般,个头不赛,根小干细,花朵繁盛。听树农讲,大多花的,以后总要剪掉的,虽可惜,但马上是为了抬高出以老并且吓的果实。梨花树干粗糙扭曲,不如杨树笔直,摸起来有点难过,好似老人之手骨一般,嶙峋沧桑。我简直抬头,蓝天背景下的梨花却变化来一番风味,与蓝天相辉映,不知是流的讲话,还是沉浸的梨花了……

读目录:

       
我随便穿行梨林,风光绮丽,梨花簇拥而到,让人盲目。随性口占一句:“一杆梨花压海棠!”不知出自谁手,但信手拈来,甚是解韵、贴切。徒步和丁流动一起上上高台,俯视梨林,层层梨花铺天盖地,仿若雪白夹杂浅绿的手绢,引人入胜,难以自拔。

正文:

当形似的网站中,都亟待利用jquery或者其它框架(比如angular)来拍卖前后端数据交互。在thinkphp在后台也置于了有函数用于数据交互(比如ajaxReturn())。本文的目的是挖潜jquery ajax到thinkphp的光景端数据交互过程。

前言:

一、thinkphp关于ajax的介绍

1.1 ajaxReturn:

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

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

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

只顾: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;

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

$this->ajaxReturn($data);

1.2 请求类型:

网放了部分常量用于判断请求类型,比如:

常量 说明

IS_GET 判断是否是GET方式提交

IS_POST 判断是否是POST方式提交

IS_PUT 判断是否是PUT方式提交

IS_DELETE 判断是否是DELETE方式交给

IS_AJAX 判断是否是AJAX提交

REQUEST_METHOD 时交给项目

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

应用方法:

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

 

一体化流程:

var serialize=$(‘#form’).serialize()结果(得到一个字符串,用serializeArray()更好,其中中文都见面变换成utf8):

serial_number=SN2&result=%E9%9D%9E%E6%B3%95

var serialize_array=$(‘#form’).serializeArray()结果(结果是json对象数组):

Array [ Object, Object ]

var data=change_serialize_to_json(serialize_array)的结果是(以老二种植转换方法为条例,结果是json对象):

Object {serial_number: “SN2”, result: “非法” }

var json_data=JSON.stringify(data)(结果是json字符串):

{“serial_number”:”SN2″,”result”:”非法”}

 

每当js端将表单数据转发为json形式之另外函数:

将json字符串转换为json对象:

eval(“(” + status_process+ “)”);

json字符串转化成json对象:

// jquery的方法

var jsonObj = $.parseJSON(jsonStr)

//js 的方法

var jsonObj =  JSON.parse(jsonStr)

json对象转化成json字符串:

//js方法

var jsonStr1 = JSON.stringify(jsonObj)

JSON.parse()用于自一个字符串中分析出json对象。JSON.stringify()相反,用于从一个对象解析出字符串。

(链接:http://blog.csdn.net/wangxiaohu\_\_/article/details/7254598)

 

str_replace() 函数用于替换掉字符串中的特定字符,比如替换掉数据易后剩下的空格、’/nbsp’等

 

顾:serialize和serializeArray()函数在处理checkbox时在无法取得不引起选的bug,需要自己编排函数改写原函数,举例:

(链接:http://www.cnblogs.com/tangge/p/6554891.html)

//value赋值为off是盖健康的serializeArray()获取到之勾选的checkbox值为on。

$.fn.mySerializeArray = function () {

    var a = this.serializeArray();

    var $radio = $(‘input[type=radio],input[type=checkbox]’, this);

    var temp = {};

    $.each($radio, function () {

        if (!temp.hasOwnProperty(this.name))

        {

            if ($(“input[name='” + this.name + “‘]:checked”).length ==
0)

            {

                temp[this.name] = “”;

                a.push({name: this.name, value: “off”});

            }

        }

    });

    return a;

};

 

老三、使用js操作DOM实现有刷新:

贯彻部分刷新的不二法门:

1、假要页面有查询form和结果table。

2、点击查询form的提交,触 发js自定义的submit事件,在submit函数中对获之表单数据检测后如果符合要求就传递给控制器,控制器从数据库获取结果数组后回来给ajax的success。对回到给ajax的结果往往组,可以创建一个refresh()函数,或直接以success中之所以jQuery(或任何js)操纵结果table(DOM),比如去tbody节点下的装有内容,并以结果往往组格式化后补偿加到tbody下面。

举例:

//1、php中的form表单

<div class=”modal fade hide” id=”add_engineer_modal” tabindex=”-1″
role=”dialog”>

……

<form id=”add_engineer_modal_form” class=”form-horizontal”>

<fieldset>

……

<button type=”button” class=”btn btn-primary”
id=”add_engineer_modal_submit”
onclick=”add_engineer_modal_submit()” >提交更改</button>

……

</fieldset>

</form>

</div>

 

//2、js校验表单并倡议ajax

function add_engineer_modal_check_value() {

    //以edit_modal_check_value()为模板

    var serialize_array_object =
$(“#add_engineer_modal_form”).mySerializeArray();

    var data = change_serialize_to_json(serialize_array_object);

    var check_results = [];

    check_results[‘result’] = [];//保存错误信息

    check_results[‘data’] = data;//保存input和select对象

    //check_employee_number是于定义判断员工号函数。

    if (check_employee_number(data[’employee_number’]) == false)

    {

        check_results[‘result’].push(“请输入有效之员工号(可选)”);

    }

    return check_results;

}

 

function add_engineer_modal_submit() {

    var check_results = add_engineer_modal_check_value();

    if (check_results[‘result’].length == 0)

    {

        var json_data = JSON.stringify(check_results[‘data’]);
  //JSON.stringify() 方法以一个JavaScript值转换为一个JSON字符串(ajax要求json对象要json字符串才能够传输)

        $.ajax({

            type: ‘POST’,

            url: add_engineer_url, //在php中全局定义url,方便使用thinkphp的U方法

            data: {“json_data”: json_data},            //ajax要求json对象要json字符串才能够传输,json_data就是json字符串而就

            dataType: “json”,

            success: function (data) {

                console.log(“数据交互成功”);

            },

            error: function (data) {

                console.log(“数据交互失败”);

            }

        });

    }

    else

    {

        //弹出错误提示alert

    }

    return 0;

}

 

3、控制器返回数组给js

public function add_engineer() {

if (IS_AJAX)

{

$posted_json_data = I(‘post.json_data’);

$posted_json_data_replace = str_replace(‘”‘, ‘”‘,
$posted_json_data);

$posted_json_data_replace_array =
(Array)json_decode($posted_json_data_replace);

   

   //处理数据库事务写入,通过判断写副结果来区别ajaxReturn的结果

  //可以以享有想如果赶回的多少在一个数组中,比如新增的行id、插入数据库的操作是否成

  //如果操作数据库成功便回到如下结果。

   $user_table->commit();

$data[‘result’] = true;

$data[‘pk_user_id’] = $data_add_user_result;

$this->ajaxReturn($data);

return 0;

}

}

改写js:

每当js的ajax中,如果全ajax正常交互,就会走success函数,否则会走error函数,一般情况下,error出现的由来还是传的多寡不符合要求。

每当success中的data就是ajaxReturn中传的频繁组,举例:

success: function (data) {

                if (data[‘result’] == false)

                {

                    alert(data[‘alert’]);

                }

                else

                {

                    $(‘#add_engineer_modal’).modal(‘hide’);

                    $(‘#user_list_table
tr’).eq(0).after(‘<tr></tr>’);

                    //这里就好用data[‘pk_user_id’]了。

                    $(‘#user_list_table
tr’).eq(1).append(‘<td>’+data[‘pk_user_id’]+'</td>’);

                }

            },

 

四、总结

全套过程是:

在php中编辑页面被的表单、提交按钮等;

以js中对php中之按钮事件续加校验和触发函数,在js函数内,如果js对象的格式和情节是就于控制器url(php中初始化)发起ajax请求;

控制器中之相应操作响应ajax请求,并认清数后举行数据库读写操作,然后对数据库操作结果做出判断,ajaxReturn返回js需要的数组;

当ajax成功返回时,js中ajax的success里面用js重写(或初始化)需要展示的消息。

如此虽成功了ajax异步局部刷新。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图