ajax在同一页面中同控制器不同方法中调用数据并异步刷新的实例

---

我在实习以来都有做一些笔记，之前做的笔记都在简书里，现在我提前把公司给我的任务做好了，坐在电脑前又不好玩别的，那么我就整理下我之前的笔记吧！（此项目是thinkphp5开发的）

先上效果图

这是整体页面图，没错有线上连接，大家可以去看看哈哈

下面的是这篇文章的主角

这部分是ajax异步出来的内容

问题

主页面调用的方法是index的，而搜索的页面的方法是ajax_list， 怎么实现页面的异步呢？直接上代码了，以前觉得有点难理解，现在不会了哈哈，大家看代码吧！

<div class="zhonghe">
                <form method="post" name="form" id="form">
                    <input type="hidden" value="demand" name="act">
                    <input type="hidden" value="1" name="op">
                    <div class="hot_ss"> <span>标题:&nbsp;&nbsp;&nbsp;</span><input type="text" value="<?php echo $output['title'];?>" name="title" id="title" class="form-control" style="width:150px"></div>
                    <div class="fuwu" id="region">
                        <label for="search_ac_id"><spam class="hot_ss">需求分类:&nbsp;&nbsp;&nbsp;</spam></label>
                        <select name="search_ac_id" id="search_ac_id" class="" style="width:130px">
                            <option value=""><?php echo $lang['nc_please_choose'];?>...</option>
                            <?php if(!empty($output['demand_class3'])&&is_array($output['demand_class3'])){?>
                            <?php foreach($output['demand_class3'] as $val){?>
                            <option value="<?php echo $val['cate_id']?>" ><?php echo $val['cate_name'] ?></option>
                            <?php if(!empty($val['chilid'])&&is_array($val['chilid'])){?>
                            <?php foreach($val['chilid'] as $v1){?>
                            <option  value="<?php echo $v1['cate_id']?>" ?>&nbsp;&nbsp;<?php echo $v1['cate_name'] ?></option>
                            <?php if(!empty($v1['child'])&&is_array($v1['child'])){?>
                            <?php foreach($v1['child'] as $v2){?>
                            <option  value="<?php echo $v2['cate_id']?>" ?>&nbsp;&nbsp;&nbsp;&nbsp;<?php echo $v2['cate_name'] ?></option>
                            <?php }?>
                            <?php }?>
                            <?php }?>
                            <?php }?>
                            <?php }?>
                            <?php }?>
                        </select>
                    </div>
                    <div class="region"><button class="upd" id="Upload" type="submit"  value="" onclick ="return false;"></button></div>

                </form>
            </div>

<div class='demand_list'>  //搜素异步内容的出现位置

                </div>

<script>
 $('#Upload').click(function () {
            $('.nav  li a').removeClass("active");
            var op  = $("input[name='op']").val();
            var title  = $('#title').val();
            var search_ac_id =$('#search_ac_id option:selected').val();
            $.ajax({
                url: "ajax_list",
                type: 'post',
                dataTypt: 'josn',
                data:{title:title,op:op,search_ac_id:search_ac_id},
                success: function (data) {
                    $('.demand_list').html(data);
                }
            });
        });
</script>

关键

<div class='demand_list'>  //搜素异步内容的出现位置

                </div>

                 success: function (data) {
                    $('.demand_list').html(data);
                }

分析

这个页面是由很多部分嵌套而来的，页面实现的内容是由不同控制器显示出来的，所以ajax的异步数据就变得点复杂（对于刚开始接触这类项目的人来说一个月前的我 >_<），要解决这个问题首先就是要把握好ajax的那部分...

感想

实习也好在学校自学也好，要懂得做笔记和整理笔记，我以前自学时就比较失误，把笔记做在本子上，也不全，更关键的是做完笔记后就没再看过它了，所以建议要做笔记的话还是做在线上，又可以及时查漏补缺，又可以让有需要的朋友互相学习下，更可以让大家观看后发现自己做的笔记是否有问题

注：文章来源雨中笑记录实习期遇到的问题与心得，转载请申明原文