AJAX改动PHP变量值的问题？

Question

是酱紫的，页面上有两个PHP的变量，给其中一个用H5的input 副了值，想要做到的事一完成赋值，就实时的更新另一个PHP变量的值，具体代码如下：

            <div class="col-md-10">
                <div class="row">
                    <div class="col-md-8">
                        <input type="text" class="form-control" name="page_image"
                               id="page_image" onchange="handle_image_change()"
                               alt="Image thumbnail" value="{{ $page_image }}">
                        <div class="row page-title-row">
                            <div class="col-md-6">
                                <div class="pull-left">
                                    <ul class="breadcrumb">
                                        <li class="active">{{ $folderName }}</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-md-6 text-right">

                                <button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#modal-file-upload" onclick="handle_upload_image()">
                                    <i class="fa fa-upload"></i> 上传
                                </button>
                            </div>
                        </div>
                    </div>
                    <script>
                        function handle_upload_image() {
                            
                        }
                        function handle_image_change() {
                            $("#page-image-preview").attr("src", function () {
                                var value = $("#page_image").val();
                                if ( ! value) {
                                    value = {!! json_encode(config('blog.page_image')) !!};
                                    if (value == null) {
                                        value = '';
                                    }
                                }
                                if (value.substr(0, 4) != 'http' &&
                                    value.substr(0, 1) != '/') {
                                    value = {!! json_encode(config('blog.uploads.webpath')) !!}
                                            + '/' + value;
                                }
                                return value;
                            });
                        }
                    </script>
                    <div class="visible-sm space-10"></div>
                    <div class="col-md-4 text-right">
                        <img src="{{ page_image($page_image) }}" class="img img_responsive"
                             id="page-image-preview" style="max-height:40px">
                    </div>
                </div>
            </div>

想要实现的是点击上传按钮之后$folderName的值实时同步赋给$page_image，就是handle_upload_image这个函数应该怎么写呢，没有学过AJAX，不知道怎样实现........Orz

Answer 1

首先你可以给folderName的li加一个id，方便之后选择它，改变代码如下：

<li class="active" id="folderName">{{ $folderName }}</li>

接下来是赋值方法，其实就是一句话

function handle_upload_image() {
    $('#page_image').html($('#folderName').text());                  
}

Answer 2

$.ajax({

    type : "POST",   //请求方式
    url : "###.do",  //路由
    data : {      //请求发送的数据
    },   
    success : function(data) {       //请求成功(200) 执行 success     
        //TODO  
    },        
    error: function(XMLHttpRequest, textStatus, errorThrown) {    //请求失败        
        //TODO  
    }  
});