본문 바로가기

ajax9

[Laravel] ajax 통신하여 컨트롤러에서 값 처리하는 방법 라라벨에서 ajax통신을 하기 위해서는 csrf-token 값이 필요하다. ajax통신을 하려는 .blade.php 파일 내에 아래 문장을 선언해준다. TYPE이 POST일 경우에는 ajax 내 dataType을 선언해주고, GET일 경우에는 선언 해주지 않아야함! $.ajax({ //아래 headers에 반드시 token을 추가해줘야 한다.!!!!! headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}, type: 'post', url: '{{ route('web.php에 선언된 route 경로') }}', dataType: 'json', data: { 원하는 데이터 }, success: function(data) { conso.. 2019. 12. 17.
[Laravel] Ajax 사용하기 1. blade 파일에 아래 구문 추가 2. headers에 토큰을 추가. 3. url에 blade문법으로 route를 추가. 4. 1번, 2번 하나라도 빠뜨리면 에러 발생 끝. $.ajax({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, type: 'POST', url: '{{ route('getmsg') }}', data: {}, dataType: 'json', success: function(data) { alert(data); }, error: function(data) { alert("error" +data); } }); 도움이 되셨다면 하트 및 댓글 부탁드립니다♥ 2019. 5. 22.
[JQuery] .load() function 사용하기 $("원하는 element id, name 등등").load("/test?tcode=5"); 페이지를 load하고 싶은 element의 속성값을 이용해서 JSP page를 load할 수 있다. locatin.href='' 처럼 URL을 적어주면 되는데 parameter값도 넘길 수 있고, Controller에 명시되어 있는 경로를 적어주면 되겠다. 원하는 element에 유동적으로 페이지를 load 하고 싶을 때 유용하게 사용할 수 있을듯. 2018. 10. 6.
[JQuery] ajax 파일업로드시 progress bar 만들기 jQuery form plugin을 사용해서 파일업로드할 때 프로그래스바를 만들어보자. 1. script를 cdn방식으로 import한다. 2. html tag 내 form tag를 작성해준다 0% 3. 생성한 div에 style적용 4. script 작성 $(function() { let bar = $('.bar'); let percent = $('.percent'); let status = $('#status'); $('form').ajaxForm({ beforeSend: function() { status.empty(); let percentVal = '0%'; bar.width(percentVal); percent.html(percentVal); }, uploadProgress: function(.. 2018. 10. 5.
[JQuery] ajax로 form data(multipart) 전송 하기 HTML JQuery $("#btnSubmit").click(function (event) { //preventDefault 는 기본으로 정의된 이벤트를 작동하지 못하게 하는 메서드이다. submit을 막음 event.preventDefault(); // Get form var form = $('#fileUploadForm')[0]; // Create an FormData object var data = new FormData(form); // disabled the submit button $("#btnSubmit").prop("disabled", true); $.ajax({ type: "POST", enctype: 'multipart/form-data', url: "/document/upload", .. 2018. 10. 4.
[JQuery] 서버단에서 Object를 받았을때 javascript단에서 Object의 크기 알아내기 $(document).ready(function(){ $.ajax({ type : 'GET', url : '/userinfo', success : function(response) { if (Object.keys(response).length > 0) { alert('length > 0'); } else { alert('length < 0') } }, error : function(e) { alert("ERROR : " + e.statusText); } }); }); 2018. 8. 20.