Einführung in die asynchrone teilweise Aktualisierung von Ajax in thinkphp

Zusammenfassung: ThinkPHP ist ein Low-End-Framework, das häufig von kleinen Websites verwendet wird. Unprofessionelle Dokumentation und Codierung machen es Benutzern jedoch leicht, nur die Oberfläche, aber nicht das Innere zu kennen. Hier besprechen wir nur die Verwendung von jquery in thinkphp zur Implementierung von Ajax A Kurze Zusammenfassung der asynchronen Interaktion.

Umgebung: ThinkPHP3.2.3, jQuery

Leseverzeichnis:

Text:

Auf allgemeinen Websites müssen Sie jquery oder andere Frameworks (z. B. Angular) verwenden ) zur Abwicklung der Front-End- und Back-End-Dateninteraktion. In thinkphp gibt es auch einige eingebaute Funktionen im Hintergrund für die Dateninteraktion (z. B. ajaxReturn()). Der Zweck dieses Artikels besteht darin, den Front-End- und Back-End-Dateninteraktionsprozess von jquery ajax bis thinkphp zu öffnen.

Vorwort:

1. thinkphpÜberajax Einführung

1.1 ajaxReturn:

ThinkController-Klasse stellt die ajaxReturn bereit Methode, die für AJAX nach dem Aufruf von verwendet wird, um Daten an zurückzugeben Client-Terminal (Ansicht, Vorlage, js usw.) . Und unterstützt JSON, JSONP, XML und EVALVier Möglichkeiten für den Client, Daten zu empfangen (Standard JSON). (Link: http://document.thinkphp.cn/manual_3_2.html#ajax_return)

Konfigurationsmethode: Konvention Der in .php definierte Standardkodierungstyp ist DEFAULT_AJAX_RETURN => 'JSON',

Analyse: ajaxReturn() Aufruf json_encode() konvertiert den Wert in das Datenspeicherformat json. Häufig verwendete Werte sind Arrays.

Hinweis: Der codierte Wert kann ein beliebiger Typ sein, außer einer Ressource (Ressourcendatei). Alle Zeichenfolgendaten müssen UTF-8 sein codiert.（Link:http://php.net/manual/en/function.json-encode.php)

Beispiel:

$data['status'] = 1;

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

$this->ajaxReturn($data);

1.2 Anfragetyp:

Systemgebaut -in Es gibt einige Konstanten, die zur Bestimmung des Anforderungstyps verwendet werden, z. B.:

Konstantenbeschreibung

IS_GET Beurteilen Sie, ob es ist GETSenden über

IS_POST Bestimmen Sie, ob es sich um POSTSenden über

handelt

IS_PUT Bestimmen Sie, ob es in PUT eingereicht wird

IS_DELETE Bestimmen Sie, ob es DELETE ist Senden über

IS_AJAX Bestimmen Sie, ob es AJAX istSenden

REQUEST_METHOD Aktueller Einreichungstyp

Zweck: Einerseits können für den Anfragetyp unterschiedliche logische Verarbeitungen vorgenommen werden, andererseits können unsichere Anfragen gefiltert werden. Methode verwenden: class UserController erweitert Controller{ public function update(){ if (IS_POST){

$User = M ( 'Benutzer');            $User->create(); 🎜>Speichern abgeschlossen

');

                                                                                                                                ');

}

}

}

1.3 Springen und umleiten:

Die

-Funktion ist relativ nutzlos. Bei der asynchronen interaktiven Teilaktualisierung

Ajax

besteht keine Notwendigkeit, mit Textaufforderungen zu springen. (Link: http://document.thinkphp.cn/manual_3_2.html#page_jump_redirect)

II , Einführung in

jQuery Ajax

: 2.1

Einführung auf der offiziellen Website zu

jQuery.ajax(): Die Methode

jQuery.ajax()

wird zum Ausführen von

AJAX (asynchron HTTP

) Anfrage. (

Link: http://www.jquery123.com/jQuery.ajax/) Syntax: $.ajax({name:value, name:value, ... })

, dieser Parameter gibt

AJAX einen oder mehrere angeforderte Namen an/ Wertepaar. Gemeinsame Parameter: Typ (Standard

: 'GET') Typ: StringAnfragemethode ("POST" oder

"GET")

, Standard ist

"GET"

. Hinweis :Andere

HTTP

-Anfragemethoden, wie z. B.

PUT

und DELETE kann ebenfalls verwendet werden, wird aber nur von einigen Browsern unterstützt.

URL (Standard: aktuelle Seitenadresse)

Typ: String

Die Adresse zum Senden der Anfrage.

asynchron (Standard: true) (1.8 Version ist veraltet Verwendung)

Typ: Boolean

Standardmäßig sind alle Anfragen asynchrone Anfragen (das heißt, dies ist die Standardeinstellung). Einstellung ist wahr ). Wenn Sie synchrone Anfragen senden müssen, setzen Sie diese Option auf false .

Daten

Typ: Objekt, String

An den Server gesendete Daten. Wird automatisch in das Anforderungszeichenfolgenformat konvertiert. Die GET -Anfrage wird an die URL angehängt. Sehen Sie sich die Beschreibung der Option processData an, um diese automatische Konvertierung zu deaktivieren. Das Objekt muss im Format "{key:value}" vorliegen . Wenn es sich bei diesem Parameter um ein Array handelt, wird jQuery ihn automatisch in ein mehrwertiges Abfragezeichen mit demselben Namen umwandeln, entsprechend dem Wert des traditionellen Parameter. Zeichenfolge (Siehe Beschreibung unten). Hinweis: Beispielsweise wird {foo:["bar1", "bar2"]} in '&foo=bar1&foo=bar2'.

dataType (Standard: Intelligent Guess (XML, JSON, Skript oder HTML))

Typ: String

Der Datentyp, der voraussichtlich vom Server zurückgegeben wird. Wenn nicht angegeben, trifft jQuery automatisch intelligente Urteile basierend auf den Informationen des HTTP -Pakets MIME , z. B Der Typ XML MIME wird als XML erkannt. In 1.4 generiert JSON ein JavaScript-Objekt und script führt dieses Skript aus. Die vom Server zurückgegebenen Daten werden dann basierend auf diesem Wert analysiert und an die Rückruffunktion übergeben. Zum Beispiel :

"json":

Führen Sie das Antwortergebnis als JSON aus und geben Sie ein JavaScript-Objekt. In jQuery 1.4 werden Daten im JSON -Format strikt analysiert. Wenn im Format ein Fehler vorliegt, jQuery wird abgelehnt und löst eine Parsing-Fehlerausnahme aus. (Weitere Informationen zum richtigen JSON-Format finden Sie unter json.org.)

Fehler

Typ: Funktion( jqXHR jqXHR, String textStatus, String errorThrown )

Diese Funktion wird aufgerufen, wenn die Anfrage fehlschlägt. Es gibt die folgenden drei Parameter: jqXHR ( vor jQuery 1.4.x ist XMLHttpRequest) Objekt, Beschreibung Eine Zeichenfolge des aufgetretenen Fehlertyps und des abgefangenen Ausnahmeobjekts. Wenn ein Fehler auftritt, kann die Fehlermeldung (zweiter Parameter) null oder "timeout", "error", "abort" sein. und „parsererror“ . Wenn ein HTTP-Fehler auftritt, empfängt errorThrown den Textteil des HTTP Status, wie zum Beispiel: „Nicht gefunden“ (nicht gefunden) oder „Interner Serverfehler.“ (interner Serverfehler). Ab jQuery 1.5 können in Fehler-Einstellungen Arrays akzeptieren, die aus Funktionen bestehen . Jede Funktion wird der Reihe nach aufgerufen. Hinweis: Dieser Handler wird nicht für Cross-Origin-Skripte und Anfragen der Form JSONP aufgerufen. Dies ist ein Ajax-Event.

Erfolg

Typ: Funktion( Objektdaten, String textStatus, jqXHR jqXHR )

Die Rückruffunktion nach erfolgreicher Anfrage. Diese Funktion übergibt 3 Parameter: Daten, die vom Server zurückgegeben und gemäß dem Parameter dataType verarbeitet werden, eine Zeichenfolge, die den Status ; und jqXHR ( vor jQuery 1.4.x >XMLHttpRequest) Objekt. In jQuery 1.5 kann die Erfolgseinstellung eine Reihe von Funktionen übernehmen. Jede Funktion wird der Reihe nach aufgerufen. Dies ist ein Ajax-Ereignis

Andere

jQuery-ajax-settings, siehe: http://www.jquery123.com/#jQuery-ajax-settings Beispiel:

in

js

Senden Sie id als Daten an den Server, speichern Sie einige Daten auf dem Server und benachrichtigen Sie den Benutzer, sobald die Anfrage abgeschlossen ist. Wenn die Anfrage fehlschlägt, benachrichtigen Sie den Benutzer.

Hinweis: Dies kann auch in

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 und The verwendet werden Der Parameter error bestimmt, ob das Anforderungsergebnis erfolgreich oder fehlgeschlagen ist, und führt den nächsten Schritt aus.

2.2 js

und

json2.2.1 json Was ist:

JSON:

JavaScript Object Notation (JavaScript Object Notation) . Es handelt sich um eine sprachunabhängige Syntax zum Speichern und Austauschen von Textinformationen.

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中编写页面中的表单、提交按钮等；

Fügen Sie eine Prüfsummen-Triggerfunktion zum Schaltflächenereignis in php in js hinzu und fügen Sie eine Prüfsummen-Triggerfunktion in jsWenn in der Funktion das Format und der Inhalt des js-Objekts korrekt sind, wird die Controller-URL(php) initiiert eine Ajax-Anfrage;

entsprechende Operationsantwort im Controllerajax Anfordern, Datenbank-Lese- und Schreibvorgänge durchführen, nachdem die Daten beurteilt wurden, und dann Beurteilungen über die Ergebnisse der Datenbankoperationen treffen, ajaxReturnReturnjsErforderliches Array;

Wenn ajax erfolgreich zurückkehrt, js in Ajax s Erfolg verwendet js, um die benötigten Informationen neu zu schreiben (oder zu initialisieren). angezeigt werden.

Damit ist die Ajax asynchrone Teilaktualisierung abgeschlossen.

Das obige ist der detaillierte Inhalt vonEinführung in die asynchrone teilweise Aktualisierung von Ajax in thinkphp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!