Introduction à l'actualisation partielle asynchrone ajax dans thinkphp

Résumé : ThinkPHP est un framework bas de gamme couramment utilisé par les petits sites Web. Cependant, une documentation et un codage non professionnels permettent aux utilisateurs de connaître uniquement la surface mais pas l'intérieur. Ici, nous discutons uniquement de l'utilisation de jquery dans thinkphp pour implémenter ajax A bref résumé de l’interaction asynchrone.

Environnement : ThinkPHP3.2.3, jQuery

Répertoire de lecture :

Texte :

Dans les sites Web en général, vous devez utiliser jquery ou d'autres frameworks (tels que angulaire ) pour gérer l'interaction des données front-end et back-end. Dans thinkphp possède également des fonctions intégrées en arrière-plan pour l'interaction des données (telles que ajaxReturn()). Le but de cet article est d'ouvrir le processus d'interaction des données front-end et back-end de jquery ajax à thinkphp.

Avant-propos :

1 thinkphpÀ propos deajax Introduction. La classe

1.1 ajaxReturn :

ThinkController fournit la classe ajaxReturn Méthode utilisée pour AJAX après avoir appelé pour renvoyer les données au Terminal client (vue, modèle, js, etc.) . Et prend en charge JSON, JSONP, XML et EVALQuatre façons pour le client de recevoir des données (par défaut JSON). (Lien : http://document.thinkphp.cn/manual_3_2.html#ajax_return)

Méthode de configuration : convention Le type d'encodage par défaut défini dans .php est DEFAULT_AJAX_RETURN => 'JSON',

Analyse : ajaxReturn() appel json_encode() convertit la valeur au format de stockage de données json Les valeurs couramment utilisées sont des tableaux.

Remarque : La valeur encodée peut être de n'importe quel type à l'exception d'une ressource (Fichier de ressources).Toutes les données de chaîne doivent être UTF-8 encodé.（Lien :http://php.net/manual/en/function.json-encode.php)

Exemple :

$data['status'] = 1;

$data['content'] = 'content';

$this->ajaxReturn($data);

1.2 Type de requête :

Système construit -in Certaines constantes sont utilisées pour déterminer le type de requête, telles que :

Description de la constante

IS_GET Juger si c'est GETSoumettre via

IS_POST Déterminez s'il est soumis via POST

IS_PUT Déterminez s'il est soumis dans PUT

IS_DELETE Déterminez s'il est DELETE Soumettre via

IS_AJAX Déterminer s'il s'agit de AJAXSoumettre

REQUEST_METHOD Type de soumission actuel

Objectif : D'une part, différents traitements logiques peuvent être effectués pour le type de demande, et d'autre part, les demandes non sécurisées peuvent être filtrées. Utiliser la méthode : class UserController étend le contrôleur{ public function update(){ if (IS_POST){

$User = M ( 'Utilisateur');            $Utilisateur->create(); 🎜>Enregistrement terminé

');

                                                                                                                                                ');

}

}

}

1.3 Sauter et rediriger :

La fonction

est relativement inutile. Dans le rafraîchissement partiel interactif asynchrone

ajax

, il n'est pas nécessaire de sauter avec des invites de texte. (Lien : http://document.thinkphp.cn/manual_3_2.html#page_jump_redirect)

II , Introduction à

jQuery Ajax

 : 2.1

Introduction du site officiel à

jQuery.ajax() : la méthode

jQuery.ajax()

est utilisée pour exécuter

AJAX (de manière asynchrone HTTP

). (Lien : http://www.jquery123.com/jQuery.ajax/) Syntaxe :

$.ajax({name:value, name:value, ... })

, ce paramètre précise AJAX un ou plusieurs noms demandés/ paire de valeurs. Paramètres communs : type (

Par défaut

 : 'GET') Type : ChaîneMéthode de requête ("POST" ou

"GET") , la valeur par défaut est

"GET". Remarque  :Autres méthodes de requête

HTTP , telles que

PUT et DELETE peut également être utilisé, mais n'est pris en charge que par certains navigateurs.

url (par défaut : adresse de la page actuelle)

Tapez : String

L'adresse à laquelle envoyer la demande.

async (Par défaut : vrai) (La version 1.8 est obsolète Utilisation)

Type : Booléen

Par défaut, toutes les requêtes sont des requêtes asynchrones (c'est-à-dire que c'est la valeur par défaut le paramètre est vrai ). Si vous devez envoyer des requêtes synchrones, définissez cette option sur false .

données

Type : Objet, Chaîne

Données envoyées au serveur. Sera automatiquement converti au format de chaîne de demande. La requête GET sera ajoutée à l'URL . Voir la description de l'option processData pour désactiver cette conversion automatique. L'objet doit être au format "{clé:valeur}" . Si ce paramètre est un tableau, jQuery le convertira automatiquement en un caractère de requête à valeurs multiples portant le même nom en fonction de la valeur du traditionnel paramètre String (Voir la description ci-dessous). Remarque : Par exemple, {foo:["bar1", "bar2"]} est converti en '&foo=bar1&foo=bar2'.

dataType (Par défaut : Intelligent Guess (xml, json, script ou html))

Type : String

Le type de données qui devrait être renvoyé par le serveur. S'il n'est pas spécifié, jQuery effectuera automatiquement des jugements intelligents basés sur les informations HTTP MIME , telles que Le type XML MIME est reconnu comme XML. Dans 1.4, JSON générera un objet JavaScript, et script exécutera ce script. Les données renvoyées par le serveur seront ensuite analysées en fonction de cette valeur et transmises à la fonction de rappel. Par exemple :

"json": Exécutez le résultat de la réponse au format JSON et renvoyez un JavaScriptobjet. Dans jQuery 1.4 , les données au format JSON sont analysées de manière stricte, s'il y a une erreur dans le format, jQuery sera rejeté et générera une exception d'erreur d'analyse. (Voir json.org pour plus d'informations sur le format JSON correct.)

erreur

Type : Fonction (jqXHR jqXHR, String textStatus, String errorThrown )

Cette fonction est appelée lorsque la requête échoue. Il y a les trois paramètres suivants : jqXHR ( avant jQuery 1.4.x est XMLHttpRequest) objet, description Une chaîne du type d'erreur qui s'est produite et de l'objet d'exception intercepté. Si une erreur survient, en plus de null, le message d'erreur (deuxième paramètre) peut également être "timeout", "error", "abort" , et "parsererror" . Lorsqu'une erreur HTTP se produit, errorThrown reçoit la partie texte du HTTP status , tel que : "Not Found" (introuvable) ou "Internal Server Error." (erreur interne du serveur). À partir de jQuery 1.5, dans les paramètres erreur peuvent accepter des tableaux composés de fonctions . Chaque fonction sera appelée tour à tour. Remarque : Ce gestionnaire n'est pas appelé pour les scripts d'origine croisée et les requêtes du formulaire JSONP. Il s'agit d'un événement Ajax.

succès

Type : Fonction (Données d'objet, String textStatus, jqXHR jqXHR)

La fonction de rappel une fois la demande réussie. Cette fonction passe 3 paramètres : des données renvoyées par le serveur et traitées selon le paramètre dataType, une chaîne décrivant le statut ; et jqXHR (avant jQuery 1.4.x >XMLHttpRequest). Dans jQuery 1.5, le paramètre de réussite peut accepter un éventail de fonctions. Chaque fonction sera appelée tour à tour. Il s'agit d'un Événement Ajax

AutrejQuery-ajax-settings, voir : http://www.jquery123.com/#jQuery-ajax-settings

Exemple :

in

js Envoyez l'id sous forme de données au serveur, enregistrez certaines données sur le serveur et informez l'utilisateur une fois la demande terminée. Si la demande échoue, alertez l’utilisateur.

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 );
});

Remarque : Ceci peut également être utilisé dans

ajax()success et The Le paramètre error détermine si le résultat de la requête est réussi ou échoué et exécute l'étape suivante.

2.2 js

et json2.2.1 json

Qu'est-ce que :

JSON

 :

JavaScript Notation d'objet (Notation d'objet JavaScript) . Il s'agit d'une syntaxe indépendante du langage pour stocker et échanger des informations textuelles.

2.2.2 json和ajax的关系？

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

在jquery的ajax函数中，只能传入3种类型的数据：

>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 = &#39;[{"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部门"}]&#39;;
      //  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对象。

这里使用第二种方法举例，可以起名为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()相反，用于从一个对象解析出字符串。

str_replace() 函数用于替换掉字符串中的特定字符，比如替换掉数据转换后多余的空格、'/nbsp'等

注意：serialize和serializeArray()函数在处理checkbox时存在无法获取未勾选项的bug，需要自己编写函数改写原函数，举例：

//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表单

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

//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');
                    $(&#39;#user_list_table tr&#39;).eq(0).after(&#39;<tr></tr>&#39;);
                    //这里就可以使用data[&#39;pk_user_id&#39;]了。
                    $(&#39;#user_list_table tr&#39;).eq(1).append(&#39;<td>&#39;+data[&#39;pk_user_id&#39;]+&#39;</td>&#39;);
                }
            },

 四、总结

整个过程是：

在php中编写页面中的表单、提交按钮等；

Ajoutez une fonction de déclenchement de somme de contrôle à l'événement de bouton dans php dans js, et ajoutez une fonction de déclenchement de somme de contrôle dans jsDans la fonction, si le format et le contenu de l'objet js sont corrects, le contrôleur url(php) initie une requête ajax

 ; contrôleurajax Request, effectue des opérations de lecture et d'écriture de la base de données après avoir jugé les données, puis porte un jugement sur les résultats de l'opération de la base de données, ajaxReturnReturnjsTableau requis ;

Lorsque ajax revient avec succès, js dans Le succès d'ajax utilise js pour réécrire (ou initialiser) les informations dont vous avez besoin à afficher.

Ceci termine le rafraîchissement partiel asynchrone ajax.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!