ajax異步請求查詢操作

大概的思路是這樣的，這也是我項目中的經歷：

1.前端首先獲取到輸入的input框的值

2.ajax異步發送請求去後端接口

3.相應的接口處理邏輯，返回json

4.前端判斷相應值並且渲染頁面

HTML代碼

<div class="item form-group">
    <label for="phone" class="control-label col-md-3 col-sm-3 col-xs-12">來電電話 <span class="required">*</span></label>
    <div class="col-md-6 col-sm-6 col-xs-12">
         <input type="text" id="phone" name="phone" value="{$cc_info.phone}" required="required" class="form-control col-md-7 col-xs-12" data-validate-length-range="4" placeholder="至少2箇中文字符">
    </div>
</div>

js代碼

$('#phone').blur(function(){
        var phone = $(this).val();
        if ( phone == '' ) {
            return;
        }

        $.get("換成自己的後端相應接口的路徑" + phone, {},//這也是關鍵的一步吧，請求後端接口
            function(res) {
                if ( res.code < 0 ) {
                    $('#user_profile').val(res.message);
                } else if ( res.code == 0 ) {
                    $('#user_profile').val('');
                    validator.mark($('#phone'), '用戶不存在');
                    user = res.message;
                    $("input[name='telephone']").val(user.telephone);
                    $('#telephone').val(user.telephone);
                    $('#net_no').val(user.net_no);
                    $('#account').val(user.account)
                } else {
                    user = res.message;// 數據渲染
//                    alert(user.telephone);
                    $("input[name='telephone']").val(user.telephone);
                    $('#telephone').val(user.telephone);
                    $('#net_no').val(user.net_no);
                    $('#account').val(user.account);
                }
            }
        );
    });

後端php代碼

這個就不上代碼了，就是邏輯處理，按自己需求處理就好

主要是這個返回，返回json格式

public function 自己的控制器名稱(參數) {
        if ( !$certain_id ) {
            $this->ajaxResponse(-1, '參數不正確！');
            return;
        }
}

    protected function ajaxResponse($code, $message = '', $extra = '') {
        $this->ajaxReturn(array('code' => $code, 'message' => $message, 'extra' => $extra));
        return;
    }

最後的ajaxReturn實際調用的就是一個json_encode（），很簡單。

以上就是全部的代碼實現過程，自己記錄一下，簡單但是很基礎。