thinkphp での Ajax 非同期部分リフレッシュの概要
- 一个新手オリジナル
- 2017-09-12 09:51:012264ブラウズ
要約: ThinkPHP は、小規模な Web サイトで一般的に使用されているローエンドのフレームワークですが、専門的ではないドキュメントとコーディングにより、ユーザーは表面だけを知り内部を理解できなくなりやすくなります。公式文書には記載されていないthinkphpでajaxの非同期対話を実装するためにjqueryを使用する方法について簡単にまとめます。
環境: ThinkPHP3.2.3、jQuery
読み取りディレクトリ:
テキスト:
一般的なWebサイトでは、jqueryを使用する必要があります または他のフレームワーク ( など) angular) を使用して、フロントエンドとバックエンドのデータ対話を処理します。 thinkphp には、データ対話用にバックグラウンドでいくつかの組み込み関数もあります (ajaxReturn() など)。この記事の目的は、jquery ajaxからthinkphpまでのフロントエンドとバックエンドのデータ対話プロセスを公開することです。
序文:
1. thinkphpajaxの紹介
1.1 ajaxReturn:
ThinkController クラスは、AfterのajaxReturnメソッドを提供しますAJAX 呼び出し は、 データを クライアント (ビュー、テンプレート、js など) に返します。そして、クライアントがデータを受け入れるための 4 つの方法 (デフォルトは JSON) をサポートします。 (リンク: http://document.thinkphp.cn/manual_3_2.html#ajax_return) 設定方法: convention.phpで定義されているデフォルトのエンコードタイプはDEFAULT_AJAX_RETURN => ', 分析: ajaxReturn() は
json_encode()を呼び出して、値を json データストレージ形式に変換します。
注:エンコードされる値は、リソース(リソースファイル)を除く任意の型にすることができます。すべての文字列データはUTF-8でエンコードされている必要があります。(リンク: http://php.net /manual/ja/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によって送信されたかどうかを決定DELETEIS_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') $this->success( '
保存完了'); }1.3
ジャンプと方向転換:関数は、
ajax非同期対話型部分更新では、テキストプロンプトでジャンプする必要はありません。 (リンク:
http://document.thinkphp.cn/manual_3_2.html#page_jump_redirect)
2.
jQuery Ajax の概要:
2.1 公式ウェブサイト
jQueryについて. ajax() の概要: jQuery.ajax() メソッドは、
AJAX
(非同期 HTTP) リクエストを実行するために使用されます。 (
リンク: http://www.jquery123.com/jQuery.ajax/)構文: $.ajax({名前:値, 名前:値, ... }) , このパラメーターは、
AJAX リクエストの 1 つ以上の名前 / 値のペアを指定します。 共通パラメータ: type (Default
: 'GET')Type: Stringリクエストメソッド ("POST" または ) 「ゲット」)
、デフォルトは 「GET」
です。注 : PUT や
DELETE などの他の
HTTP リクエスト メソッドも使用できますが、一部のブラウザでのみサポートされています。
url (デフォルト: 現在のページアドレス)
Type: String
リクエストを送信するアドレス。
async (デフォルト: true)(1.8バージョンは非推奨です)
Type: Boolean
デフォルトでは、すべてのリクエストは非同期です私たちのリクエスト（これも意味します）デフォルトでは true に設定されています)。同期リクエストを送信する必要がある場合は、このオプションを false に設定します。
data
Type: Object、String
サーバーに送信されるデータ。リクエスト文字列形式に自動的に変換されます。 GET リクエストは URL に追加されます。この自動変換を無効にするには、processData オプションの説明を参照してください。オブジェクトは、"{key:value}"の形式である必要があります。このパラメータが配列の場合、jQueryは、伝統的なパラメータの値に従って、それを同じ名前の複数値のクエリ文字列に自動的に変換します(以下の説明を参照してください) )。注: たとえば、{foo:["bar1", "bar2"]} は '&foo=bar1&foo=bar2' に変換されます。
dataType (Default: インテリジェント推測 (xml、json、script、または html))
Type: String
サーバーによって返される予期されるデータ型。指定しない場合、jQuery は HTTP パッケージ MIME 情報に基づいて自動的にインテリジェントな判断を行います。たとえば、XML MIME タイプは XML として認識されます。 1.4では、JSONがJavaScriptオブジェクトを生成し、scriptがこのスクリプトを実行します。サーバーから返されたデータは、この値に基づいて解析され、コールバック関数に渡されます。例: :
"json": 応答結果をJSONとして実行し、JavaScriptオブジェクトを返します。 jQuery 1.4 では、JSON 形式のデータは厳密な方法で解析され、形式にエラーがある場合、jQuery は拒否され、解析エラー例外がスローされます。 (正しい JSON 形式の詳細については、json.org を参照してください。)
エラー
Type: Function( jqXHR jqXHR, String textStatus, String errorThrown )
この関数は、リクエストが失敗したときに呼び出されます。次の 3 つのパラメータがあります: jqXHR (jQuery 1.4.x は XMLHttpRequest でした) オブジェクト、発生したエラーのタイプとキャプチャされた例外オブジェクトを説明する文字列。エラーが発生した場合、 null に加えて、エラー メッセージ (2 番目のパラメータ) は "timeout"、"error"、"abort" 、および "parsererror" になる場合があります。 HTTP エラーが発生すると、errorThrown は、「Not Found」 または 「Internal Server Error」 などの HTTP ステータスのテキスト部分を受け取ります。 (サーバーの内部エラー)。 jQuery 1.5 以降、 は error 設定で関数の配列を受け入れることができます。各関数は順番に呼び出されます。 注: このハンドラーは、クロスオリジン スクリプトや JSONP 形式のリクエストに対しては呼び出されません。これは Ajax イベント です。
success
Type: Function(Object data, String textStatus, jqXHR jqXHR)
リクエストが成功した後のコールバック関数。この関数は 3 パラメーターを渡します。サーバーから返され、dataType パラメーターに従って処理されるデータ、 および jqXHR ( jQuery 1.4.x の場合) 以前は XMLHttpRequest) オブジェクト。 jQuery 1.5 では、成功設定で関数の配列を受け入れることができます。各関数は順番に呼び出されます。これはAjaxイベント
その他jQuery-ajax-settingsです。詳細については、次を参照してください:http://www.jquery123.com/#jQuery-ajax-settings例:
idをjsのサーバーにデータとして送信し、一部のデータをサーバーに保存し、リクエストが完了したらユーザーに通知します。 リクエストが失敗した場合は、ユーザーに警告します。
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 );
});注:
success および error パラメータを ajax() で使用して、リクエストの結果が成功か失敗かを判断し、次のステップを実行することもできます。 json とは何ですか? JavaScript オブジェクト表記法)。これは、テキスト情報を保存および交換するための言語に依存しない構文です。
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 = '[{"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对象。
这里使用第二种方法举例，可以起名为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');
$('#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中编写页面中的表单、提交按钮等；
phpのボタンイベントにjsのチェックサムトリガー関数を追加します。js関数内で、jsオブジェクトの形式と内容が正しい場合は、それを報告します。コントローラー url (phpで初期化) は、ajax リクエストを開始し、
コントローラーで対応する操作を実行し、データベースの読み取りおよび書き込み操作を実行します。データを判定した後、データベースに対してデータベースの読み取りおよび書き込み操作を実行します。操作の結果が判定され、ajaxReturnはjsが必要とする配列を返します。
が正常に返された場合、ajaxの中にあるsuccessjsは、表示する必要のある情報を書き換える（または初期化する）ために内部で使用されます。 これで、ajax非同期部分リフレッシュが完了しました。
以上がthinkphp での Ajax 非同期部分リフレッシュの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。