찾다

집  >  기사  >  백엔드 개발  >  thinkphp의 Ajax 비동기 부분 새로 고침 소개

thinkphp의 Ajax 비동기 부분 새로 고침 소개

一个新手
一个新手원래의
2017-09-12 09:51:012289검색

요약: ThinkPHP는 소규모 웹사이트에서 일반적으로 사용되는 저사양 프레임워크이지만 전문적이지 않은 문서와 코딩으로 인해 사용자는 겉모습만 알 수 있고 내부는 알 수 없습니다. 다음은 공식 문서에 언급되지 않은 ajax 비동기 상호 작용을 thinkphp에서 구현하기 위해 jquery을 사용하는 방법에 대한 간략한 요약입니다.

Environment: ThinkPHP3.2.3, jQuery

읽기 디렉터리:

Text:

일반 웹사이트에서는 jque를 사용해야 합니다. ry 또는 기타 프레임워크(예: angular)를 사용하여 프런트엔드 및 백엔드 데이터 상호 작용을 처리합니다. thinkphp에는 데이터 상호 작용을 위해 백그라운드에 몇 가지 내장 기능도 있습니다(예: ajaxReturn()). 이 글의 목적은 jquery ajax에서 thinkphp까지 프런트엔드와 백엔드 데이터 상호작용 프로세스를 공개하는 것입니다.

머리말:

1. thinkphpajax소개

1.1 ajaxReturn:

Th inkController 클래스는 이후에 대한 ajaxReturn 메서드를 제공합니다. AJAX 호출 은 데이터를 클라이언트(보기, 템플릿, js 등) 에 반환합니다. 그리고 클라이언트가 데이터를 허용하는 JSON, JSONP, XML 및 EVAL 네 가지 방법을 지원합니다(기본값 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/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에 의해 제출되었는지 확인 DELETEIS_AJAX에 의해 제출되었는지 확인

AJAX에 의해 제출되었는지 확인 제출REQUEST_METHOD 현재 제출 유형

목적: 요청 유형에 대해 서로 다른 논리적 처리를 수행할 수 있고, 안전하지 않은 요청을 필터링할 수 있습니다.

(링크: http://document.thinkphp.cn/manual_3_2.html#request_method)Usage:

class UserController는 Controller를 확장합니다.{

​​​ public function update(){

if (IS_POST){

                  $User = M('사용자')                                                 $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 요청에 대한 하나 이상의 이름 / 값 쌍을 지정합니다. 공통 매개변수: type(Default

: 'GET')Type: String요청 방법("POST" 또는

"받기" )

, 기본값은

"GET"

입니다. 참고 : Other

HTTP

요청 방법(예:

PUT

및 DELETE )도 사용할 수 있지만 일부 브라우저에서만 지원됩니다.

url (Default: 현재 페이지 주소)

Type: String

요청을 보낼 주소입니다.

async(Default: 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, 스크립트 또는 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을 참조하세요.)

error

Type: 함수( jqXHR jqXHR, String textStatus, String errorThrown )

이 함수는 요청이 실패할 때 호출됩니다. 다음 세 가지 매개변수가 있습니다: jqXHR(이전 jQuery 1.4.x은 XMLHttpRequest였습니다) 객체, 발생한 오류 유형과 캡처된 예외 객체를 설명하는 문자열입니다. 오류가 발생하면 null 외에도 오류 메시지(두 번째 매개변수)는 "timeout", "error", "abort" 및 "parsererror"일 수도 ​​있습니다. http 오류가 발생하면 다음과 같은 http 상태의 텍스트 부분을 수신합니다 (서버 내부 오류). jQuery 1.5부터 error의 설정은 함수로 구성된 배열을 허용할 수 있습니다. 각 함수는 차례로 호출됩니다. 참고: 이 핸들러는 교차 출처 스크립트 및 JSONP 형식의 요청에 대해 호출되지 않습니다. 이것은 Ajax 이벤트입니다. successType: Function(Object data, String textStatus, jqXHR jqXHR)요청 성공 후의 콜백 함수입니다. 이 함수는 3

매개변수를 전달합니다. 서버에서 반환되어

dataType

매개변수에 따라 처리된 데이터, 상태를 설명하는 문자열

및

jqXHR

( jQuery 1.4.x) 이전에는 XMLHttpRequest) 개체입니다. jQuery 1.5에서 성공 설정은 다양한 기능을 수용할 수 있습니다. 각 함수는 차례로 호출됩니다. 이것은 Ajax 이벤트OtherjQuery-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 매개변수를 사용하여 요청 결과의 성공 여부를 확인하고 다음 단계를 수행할 수도 있습니다. 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 = &#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=$(&#39;#form&#39;).serialize();
得到：a=1&b=2&c=3&d=4&e=5
var serialize_string_array=$(&#39;#form&#39;).serializeArray();
得到：
[
  {name: &#39;firstname&#39;, value: &#39;Hello&#39;},
  {name: &#39;lastname&#39;, value: &#39;World&#39;},
  {name: &#39;alias&#39;}, // 值为空
]

相对来说，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 || &#39;&#39;);
    } else {
        data[x.name] = x.value || &#39;&#39;;
    }
});
输出：{"input1":"","textarea":"234","select":"1"}

 

完整流程：

var serialize=$(&#39;#form&#39;).serialize()结果（得到一个字符串，用serializeArray()更好，其中中文都会转换成utf8）：
serial_number=SN2&result=%E9%9D%9E%E6%B3%95
var serialize_array=$(&#39;#form&#39;).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 = $(&#39;input[type=radio],input[type=checkbox]&#39;, this);
    var temp = {};
    $.each($radio, function () {
        if (!temp.hasOwnProperty(this.name))
        {
            if ($("input[name=&#39;" + this.name + "&#39;]: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[&#39;result&#39;] = [];//保存错误信息
    check_results[&#39;data&#39;] = data;//保存input和select对象
    //check_employee_number是自定义判断员工号函数。
    if (check_employee_number(data[&#39;employee_number&#39;]) == false)
    {
        check_results[&#39;result&#39;].push("请输入有效的员工号（可选）");
    }
    return check_results;
}
 
function add_engineer_modal_submit() {
    var check_results = add_engineer_modal_check_value();
    if (check_results[&#39;result&#39;].length == 0)
    {
        var json_data = JSON.stringify(check_results[&#39;data&#39;]);   //JSON.stringify() 方法将一个JavaScript值转换为一个JSON字符串（ajax要求json对象或json字符串才能传输）
        $.ajax({
            type: &#39;POST&#39;,
            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(&#39;post.json_data&#39;);
$posted_json_data_replace = str_replace(&#39;"&#39;, &#39;"&#39;, $posted_json_data);
$posted_json_data_replace_array = (Array)json_decode($posted_json_data_replace);
   
   //处理数据库事务写入，通过判断写入结果来区分ajaxReturn的结果
  //可以将所有想要返回的数据放在一个数组中，比如新增的行id、插入数据库的操作是否成功
  //如果操作数据库成功就返回如下结果。
   $user_table->commit();
$data[&#39;result&#39;] = true;
$data[&#39;pk_user_id&#39;] = $data_add_user_result;
$this->ajaxReturn($data);
return 0;
}
}
改写js：
在js的ajax中，如果整个ajax正常交互，就会走success函数，否则会走error函数，一般情况下，error出现的原因都是传输的数据不符合要求。
在success中的data就是ajaxReturn中传输的数组，举例：
success: function (data) {
                if (data[&#39;result&#39;] == false)
                {
                    alert(data[&#39;alert&#39;]);
                }
                else
                {
                    $(&#39;#add_engineer_modal&#39;).modal(&#39;hide&#39;);
                    $(&#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中编写页面中的表单、提交按钮等；

php의 버튼 이벤트에 js의 체크섬 트리거 함수를 추가합니다. js 함수 내에서 js 개체의 형식과 내용이 올바른 경우 보고해 주세요. 컨트롤러 url(php에서 초기화됨)은 ajax 요청을 시작합니다.

컨트롤러의 해당 작업은 ajax 요청에 응답하고 데이터베이스 읽기 및 쓰기 작업을 수행합니다. 데이터를 판단한 후 데이터베이스에서 데이터베이스 읽기 및 쓰기 작업을 수행합니다. 작업 결과가 판단되면 ajaxReturn은 js에 필요한 배열을 반환합니다.

ajax이 성공적으로 반환되면 js is in ajax success js은 표시해야 하는 정보를 다시 작성(또는 초기화)하기 위해 내부에서 사용됩니다.

이렇게 하면 ajax비동기 부분 새로 고침이 완료됩니다.

위 내용은 thinkphp의 Ajax 비동기 부분 새로 고침 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：PHP 프로세스 잠금 관련 콘텐츠다음 기사：PHP 프로세스 잠금 관련 콘텐츠

관련 기사

더보기