• 쇼핑몰
  • 커뮤니티
  • 북마크

FAQ (List)

전체 3 건 - 1 페이지
  • Ajax로 자료 읽기(jQuery)

    <시작 | 파일명 : jq9_ajax.html >





    <!DOCTYPE html>


    <html>

    <head>

    <meta charset="UTF-8">

    <title>Insert title here</title>




    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script type="text/javascript" src="js/jq9.js"></script>




    </head>

    <body>

    <h2>* Ajax로 자료 읽기(jQuery) *</h2>

    <div>

    <ul>

    <li id="t1">html 읽기</li>

    <li id="t2">json 읽기</li>

    <li id="t3">xml 읽기</li>

    </ul>

    </div>

    <br>

    <div id="disp"></div>

    </body>

    </html>


    <종료 | 파일명 : jq9_ajax.html >


     


    <시작 | 파일명 : jq9.js >





    $(document).ready(function(){


    //1.html 등 의 text 문서 읽기

    $("#t1").click(function(){

    $("#disp").hide().load("jq9_a.html",function(){

    $(this).fadeIn(); // fade effect

    });

    });




    //2. json 문서 읽기

    $("#t2").click(function(){

    $.getJSON("jq9_b.json", function(data){

    $("#disp").empty();




    $.each(data, function(index, value){

    var ss = "<ol>";

    ss += "<li>" + value["title"] + "</li>";

    ss += "<li>" + value["desc"] + "</li>";

    ss += "<li>" + value["title"] + "</li>";

    ss += "</ol>";

    $("#disp").append(ss);

    });

    });

    });




    //3. xml 읽기

    $("#t3").click(function(){

    $("#disp").empty();

    $.get("jq9_c.xml", function(data){

    //$.post("jq9_c.xml", function(data){ //post 형태로도 가능

    //alert($(data).find("aa").size());

    $(data).find("aa").each(function(){

    var adata = $(this); // 현재 읽힌 aa 요소

    var ss = "<div>";

    // 속성 값 읽기

    ss += aadata.attr("part") + " " + aadata.attr("term");

    // 요소 값 읽기

    ss += " - ";

    ss += aadata.find("desc").text();

    ss+= "</div>";

    $("#disp").append(ss);

    })




    });

    });

    });


    <종료 | 파일명 : jq9.js >

    [이 게시물은 이포유님에 의해 2019-10-20 06:57:46 팁 & 테크에서 복사 됨]
  • 스크립트로 간단하게 확장필드 다중검색하기

    해당게시판 list.skin.php상단에 다음 코드추가

    1)확장필드 갯수만큼 empty array 생성 및 자바스크립트 변수생성하기위해 검색시 넘어온 stx값을 array에 입력

    <?php

    $searchGroup = ['',''];

    if(isset($_GET['sfl'])){

        if($_GET['sfl'] == 'wr_8||wr_1'){

            $showFS = explode(' ', $_GET['stx']);

            for($i = 0; $i < count($showFS); $i++){

                $searchGroup[$i] = $showFS[$i];

            }

        }

    }

    ?>

     

    3)위 php소스 바로 아래 script추가(php변수 스크립트로 전달)

    <script>

        <?php

            $searchGroup = json_encode($searchGroup);

            echo "let URLgroup = ". $searchGroup . ";\n";

        ?>

    </script>

     

    4)중단에 버튼 생성

    <input type="button" name="" value='판매함' class='fieldSearch'>

    <input type="button" name="" value='판매안함' class='fieldSearch'>

    <input type="button" name="" value='진열함' class='fieldSearch displayF'>

    <input type="button" name="" value='진열안함' class='fieldSearch displayF'>

     

    5)제일 하단에 버튼 클릭시 이동경로생성(테이블명또한 변경해주세요)

    <script>

    $('.fieldSearch').click(function(){

        if($(this).hasClass('displayF')){

            URLgroup[0] = $(this).val();

        }else{

            URLgroup[1] = $(this).val();

        }

        location.href = 'http://localhost/bbs/board.php?bo_table=product&sfl=wr_8||wr_1&stx='+ URLgroup[0] + ' ' + URLgroup[1];

    })

    </script>
  • 링크 클릭시 특정영역에 페이지 불러오기 (아이프레임X)


    <!doctype html>
    <html lang="ko">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="imagetoolbar" content="no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>

    <script src="http://false9.wckorea.gethompy.com/js/jquery-1.8.3.min.js"></script>

    </head>
    <body>

    <a href="javascript:void(0);" onclick="btnclick('02.html')">페이지01</a> 
    <a href="javascript:void(0);" onclick="btnclick('03.html')">페이지02</a> 
    <a href="javascript:void(0);" onclick="btnclick('01.html')">처음으로</a>

    <br>
    <br>

    <div id="include_page">첫페이지 (01.html)</div>

    <script type="text/javascript">
    function btnclick(_url){
    $.ajax({
    url : _url,
    type : 'post',
    success: function(data) {
    $('#include_page').html(data);
    },
    error: function() {
    $('#include_page').text('페이지 점검중 입니다.');
    }
    });
    }
    </script>

    </body>
    </html>

     
    [이 게시물은 이포유님에 의해 2019-10-20 06:57:46 팁 & 테크에서 복사 됨]