PHP 및 jquery를 사용하여 사용자 입력을 기반으로 동적으로 내용을 표시합니다.

Question

이름 및 날짜를 ​​기반으로하는 트랜잭션 목록을 표시하는 양식이 있습니다.

<form id="form1" name="form1" method="post" action="<?php echo base_url() ?>options/history"> 
    Name 
    <input name="name" type="text" id="name" /> 
    date 
    <input name="date" type="text" id="date" /> 
    <input name="find" type="submit" id="find" value="find" /> 
</form> 

양식이 제출되면 모든 관련 세부 정보가 표시됩니다.

누군가 jquery를 사용하여 같은 페이지에서 데이터를로드하는 방법을 설명 할 수 있습니까?

저는 jquery와 학습에 익숙합니다. 몇 가지 조사를 수행했으며 아래에 내가 찾은 바가 있습니다.

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('#find').click(function() { 
       $.ajax({ 
        type: "GET", 
        cache: false, 
        url: "<?php echo base_url() ?>options/history", 
        success: function(data) { 
         alert('Data Loaded'); 
        } 
       }); 
      }); 

     }); 
    </script> 

또한 컨트롤러에 양식 변수를 전달하는 방법은 무엇입니까? 컨트롤러에 직접 값을 전달할 수 있습니까? 아니면 URL과 함께 값을 전달해야합니까?

Answer 1

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#form1').submit(function() { 
      // get the data of the form 
      var data_form = $('#form1').serialize(); 
      $.ajax({ 
       type: "GET", 
       cache: false, 
       data: data_form, 
       url: "<?php echo base_url() ?>options/history", 
       success: function(data) { 
        alert('Data Loaded'); 
        // Your data is in the var data returned, you can use it with, for example: $("#content").html(data); 

       } 
      }); 
      // Prevent default behaviour 
      return false; 
     }); 

    }); 
</script> 

Answer 2

여기 다소 혼란 스럽습니다. 하지만 실제로이 원하는 가정 :

$('form#form1').submit(function(evt){ 
    $.ajax({ 
    type: "GET", 
    data: $(this).serialize(), 
    cache: false, 
    url: "<?php echo base_url() ?>options/history", 
    success: function (data) { 
     alert('Data Loaded'); 
    } 
    }); 
    evt.preventDefault(); 
    return false; 
}); 

당신이 대신 자바 스크립트의 submit 이벤트에 바인딩 .submit()를 사용할 수 있습니다. 이 핸들러의 끝에 false을 반환하면 위에 표시된 것처럼 양식 제출을 중지 할 수 있습니다. 또는 evt.preventDefault()을 사용합니다.

$.ajax의 data 속성은 서버로 보낼 데이터를 지정합니다. 이 데이터를 얻으려면 .serialize()을 사용할 수 있습니다. 제출할 준비가 된 양식 요소를 인코딩합니다.