AJAX \ JQUERY : 새로 고치지 않고 양식 데이터로 MYSQL 데이터베이스를 업데이트하십시오.

Question

좋아요, 그래서이 일의 대부분을 얻었습니다. 이제는 어려운 부분입니다. 이것은 나를 위해 읽히지 않은 영토입니다.

페이지를 새로 고치지 않고도 양식 데이터로 mysql 데이터베이스를 어떻게 업데이트합니까? 나는 AJAX와 Jquery를 사용하여이 작업을 수행한다고 추측합니다.하지만 예제를 제대로 이해하지 못했습니다.

누구든지이 상황에서이 작업을 수행하는 방법을 알려주십시오. 사용자가 새 목록 항목을 만들려고하지만 경우에, 그것은 사용자에 따라 데이터베이스에서 채워집니다

<form name="checklist" id="checklist" class="checklist"> 
     <?php // Loop through query results 
       while($row = mysql_fetch_array($result)) 
        { 
        $entry = $row['Entry']; 
        $CID = $row['CID']; 
        $checked =$row['Checked']; 
       // echo $CID; 
        echo "<input type=\"text\" value=\"$entry\" name=\"textfield$CID;\" id=\"textfield$CID;\" onchange=\"showUser(this.value)\" />"; 
        echo "<input type=\"checkbox\" value=\"\" name=\"checkbox$CID;\" id=\"checkbox$CID;\" value=\"$checked\"".(($checked == '1')? ' checked="checked"' : '')." />"; 
        echo "<br>"; 
        } 
     ?> 
     <div id="dynamicInput"></div> 
     <input type="submit" id="checklistSubmit" name="checklistSubmit" class="checklist-submit"> <input type="button" id="CompleteAll" name="CompleteAll" value="Check All" onclick="javascript:checkAll('checklist', true);"><input type="button" id="UncheckAll" name="UncheckAll" value="Uncheck All" onclick="javascript:checkAll('checklist', false);">     
    <input type="button" value="Add another text input" onClick="addInput('dynamicInput');"></form> 

이 SESSION_ID (또는 새로운 방문자 기간) 그가 할 수

그래서이 내 양식입니다 "다른 텍스트 입력 추가"버튼을 클릭하면 새 양식 요소가 생성됩니다.

데이터베이스에 대한 모든 업데이트는 AJAX \ JQUERY를 통해 수행해야하며 페이지를 새로 고치는 게시물을 통해 수행해야합니다.

정말 도움이 필요합니다. 이런 종류의 주위에 내 머리를 얻는 ... 상처의 방법 종류를 업데이 트!

감사합니다. 내가

$.ajax({ 
    url: 'http://example.com', 
    type: 'GET', 
    data: $('#checklist').serialize(), 
    cache: false, 
}).done(function (response) { 
    /* It worked */ 
}).fail(function() { 
    /* It didnt worked */ 
}); 

희망이 도움을 JQuery와

를 사용하여 폼 데이터를 게시하는 방법

Answer 1

이가, 나에게 당신이 얼마나 알고하자!

Answer 2

버튼을 클릭해야합니다. 전파를 중지하십시오.

$('checklistSubmit').click(function(e) { 
    $(e).stopPropagation(); 

    $.post({ 
     url: 'checklist.php' 
     data: $('#checklist').serialize(), 
     dataType: 'html' 
     success: function(data, status, jqXHR) { 
      $('div.successmessage').html(data); 
      //your success callback function 
     } 
     error: function() { 
      //your error callback function 
     } 
    }); 
}); 

그건 내 머리 꼭대기에서 일어난 일입니다. 기본 아이디어를 제공해야합니다. 필요한 경우 더 자세히 설명해 드리겠습니다.

자세한 내용은 $ .post의 jQuery 설명서를 확인하십시오.

http://api.jquery.com/jQuery.post/

편집 :

내가 jQuery의 직렬화 방법을 사용하도록 변경되었습니다. 원래는 잊어 버렸어.

더 정교화 :

제출 버튼을 클릭 기본적 때 지정된 함수를 호출합니다. 중지 전파를 수행하여 DOM을 버블 링하고 정상 제출을 수행하여 양식이 제출되지 않도록하려고합니다.

$ .ajax ({type : 'post'})의 약식 버전입니다.

그래서 당신이 할 일은 양식 데이터를 전달하고 PHP에서 다른 요청과 마찬가지로 올리려는 URL을 지정하는 것입니다. 그런 다음 POST 데이터를 처리하고 변경 사항을 데이터베이스 또는 다른 것으로 저장하고 JSON 데이터를 지정된대로 다시 전송합니다. HTML 또는 XML을 다시 보낼 수도 있습니다. jQuery의 문서는 가능한 데이터 유형을 보여준다.

성공 함수에서 첫 번째 매개 변수로 데이터가 반환됩니다. 따라서 다시 돌아 오는 데이터 유형으로 지정한 것이 무엇이든 원하는대로 사용하십시오.따라서 html을 성공 메시지로 반환한다고 가정 해 봅시다. 성공 함수에서 데이터를 가져 와서 .append() 또는 그와 유사한 것으로 DOM에 넣기 만하면됩니다.

진흙처럼 맑습니까?

Answer 3

여기에는 AJAX (프레임 워크를 사용하는 것이 더 좋으며, jQuery는 가장 편하다)와 Post 데이터를 가져 와서 데이터베이스를 업데이트하는 PHP 스크립트가 필요합니다.

전체 소스를 제공하지는 않지만 (가이드 라인이 아니기 때문에) 가이드입니다. jQuery를 당신은 다음과 같이 수행 할 수 있습니다

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { // DOM is ready 
    $("form#checklist").submit(function(evt) { 
     evt.preventDefault(); // Avoid the "submit" to work, we'll do this manually 
     var data = new Array(); 
     var dynamicInputs = $("input,select", $(this)); // All inputs and selects in the scope of "$(this)" (the form) 

     dynamicInputs.each(function() { 
      // Here "$(this)" is every input and select 
      var object_name = $(this).attr('name'); 
      var object_value = $(this).attr('value'); 
      data[object_name] = object_value; // Add to an associative array 
     }); 

     // Now data is fully populated, now we can send it to the PHP 
     // Documentation: http://api.jquery.com/jQuery.post/ 
     $.post("http://localhost/script.php", data, function(response) { 
      alert('The PHP returned: ' + response); 
     }); 
    }); 
}); 
</script> 

그런 다음 PHP에서 $ _POST의 값을 (또는 다른 웹 서버 스크립트 엔진)과 DB를 업데이트하여 일을. URL 및 데이터 배열을 필요에 맞게 변경하십시오.

데이터는 {input1 : value1, input2 : value2}와 같을 수 있으며 PHP는 $ _POST [ 'input1'] = value1 및 $ _POST [ 'input2'] = value2와 같은 것을 가져옵니다.