在网页中前台和后台打交道，用到最多的应该就是ajax了。关于如何在前台和后台交互数据，ajax就可以实现在不刷新页面的前提下，与后台数据进行交互，并通过jquery/js处理，在页面中变化显示，php开发基本技能之一。

静态页面中通过jquery封装的$.ajax方法，在php中返回json格式数据，jquery能够获取返回的数据并进行操作了。

一、下面是前台页面例子：

function(index) {
    var arr = [];
    $("input[name='ckb']:checked").each(function(index, el) {
        arr.push($(this).val()); 
    });
    var reason = $(".allpic_reason").val();
    $.ajax({
        url: '{:U("model/allpicno")}',
        type: 'post',
        dataType: 'json',
        data: {ckb: arr,reason: reason},
    })
    .done(function(data) {
        if(data.status==200){
            $.each(data.result,function(index, val) {
                str+="<option value='"+val.id+"'>"+val.name+"</option>";
            });
            _this.parents('td').find(".scate_s").html(str);
            _this.parents('td').find(".scate_s option[value='"+thissmall+"']").prop("selected",true);
        }
    }) 
}

注：这里是基于thinkphp中的ajax回调，如果你是php写的，将url替换成你请求的地址。

这里的$.each非常实用，它是把结果拼接成一个select各个选项，通过jquery拼接起来，在前台输出。这样就可以实现变换select中option的作用。

二、下面是php端处理和回调例子

public function allpicno() {
    $data['status'] = 200;
    $data['msg'] = '获取成功';
    $tmp = $this->model->allpicno();
    $data['result'] = $tmp;
    $this->ajaxReturn($data);
}

其中tmp就是你获取的所需要的回调数据，thinkphp中ajaxreturn会自动json_encode下。

这样就可以在不刷新页面的情况下实现前台后台的数据交互，非常方便。