我在實習以來都有做一些筆記，之前做的筆記都在簡書裏，現在我提前把公司給我的任務做好了，坐在電腦前又不好玩別的，那麽我就整理下我之前的筆記吧！（此項目是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的那部分...*

感想

實習也好在學校自學也好，要懂得做筆記和整理筆記，我以前自學時就比較失誤，把筆記做在本子上，也不全，更關鍵的是做完筆記後就沒再看過它了，所以建議要做筆記的話還是做在線上，又可以及時查漏補缺，又可以讓有需要的朋友互相學習下，更可以讓大家觀看後發現自己做的筆記是否有問題

註：文章來源雨中笑記錄實習期遇到的問題與心得，轉載請申明原文

ajax在同一頁面中同控制器不同方法中調用數據並異步刷新的實例