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(),很简单。

以上就是全部的代码实现过程,自己记录一下,简单但是很基础。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值