Ajax jquery php post beginner

Question

아약스와 jquery를 사용하여 페이지를 다시로드하지 않고 버튼을 게시하는 방법을 배우는 데 어려움이 있습니다. 구체적으로 : 양식이 여전히 페이지를 다시로드 중이며 변수가 업데이트되지 않습니다.

여기 제가 걸림돌이됩니다.

Jquery/AJAX를 시도하기 전에 사용한 내용. 그냥 PHP

// $_POST['selected_dir'] is set when you click on a folder or link within the explore(r).php  

if (isset($_POST['selected_dir'])) 
    { 
     // last selected folder/directory 
    $current_dir = $_POST['selected_dir']; 
     // current_dir is the folder we are looking inside of. 
     // we make it a $session so that if we click a different submit (RELOAD) 
     // within the page it will remember $current_dir; 
    $_SESSION['selected_dir'] = $current_dir; // 
    } 

    else // if $_post isint set but $_session is 
    if (isset($_SESSION['selected_dir'])) 
     { 
$current_dir = $_SESSION['selected_dir']; 
} 
else 
{ 
// default folder/directory 
$current_dir = "$root"; //'D:\Hosting\538\html'; 
} 

<form action='explore.php' method='post'> 
    <input type='image' 
     src='$folder_icon' 
     alt='Submit' 
      name='' 
     value='submit'/> 

     <input type='hidden' 
       value='$f_path/$value' 
     name='selected_dir'/> 

     <input type='submit' 
     value='$value' 
     name='$value' 
     class='submit_into_link'/> 
</form> 

그래서 이미지 나 페이지가 다시로드되는 링크를 클릭 할 때를 제외하고는 매우 효과적입니다. 마침내 jquery와 ajax를 사용해야하고 지금까지 자바 스크립트를 사용한 적이 없다는 결론에 도달했습니다. 필자는 튜토리얼을 통해 읽고 그리고 난 정말 내 헤더

내가 이것을 가지고이 일을하기 위해 점을 연결하지 못할

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> 

나는 몸에서 내 페이지 상단이이

$.ajax 
    ({ 
    type: 'POST', 
    url: 'explore_be.php', 
    data: data, success: 
    success function(data, textStatus, jqXHR), 
    complete: function(), 
    dataType: dataType 
    }); 

위의 코드에 대해 몇 가지 질문이 있습니다. 나는 그것을 사용하는 방법을 잘 모르겠습니다. 이 아약스 코드를 onclick 함수 안에 넣어야합니까? jquery에서 살펴본 몇 가지 예제처럼 보입니다. 다음과 같은 것을 사용하십시오.

$(document).ready(function() 
{ 
$(".flip").click(function() // this is a piece of code i got from w3schools.com 
}); 

.flip 위의 클래스입니다. 이야기 할 때 버튼을 사용하는 것을 보았습니다

<button> 

그러나 특정 입력 ID가있는 양식의 버튼은 무엇입니까? 아니면 그냥 양식 입력에 추가해야합니까 onclick = "클릭()"그 기능에 아약스 넣어? 아약스는 $ (document) .ready (function())에 있어야 할 필요가 있습니까?

데이터 유형에 대해 무엇을 넣어야합니까?

나는 내 PHP 코드를 explore_be.php 파일에 넣었다.

explore_be.php

// $_POST['selected_dir'] is set when you click on a folder or link within the explore(r).php  

if (isset($_POST['selected_dir'])) 
    { 
     // last selected folder/directory 
    $current_dir = $_POST['selected_dir']; 
     // current_dir is the folder we are looking inside of. 
     // we make it a $session so that if we click a different submit (RELOAD) 
     // within the page it will remember $current_dir; 
    $_SESSION['selected_dir'] = $current_dir; // 
    } 

    else // if $_post isint set but $_session is 
    if (isset($_SESSION['selected_dir'])) 
     { 
$current_dir = $_SESSION['selected_dir']; 
} 
else 
{ 
// default folder/directory 
$current_dir = "$root"; //'D:\Hosting\538\html'; 
} 

페이지 뒤에 코드가 모든인가요?

나는 나의 행동을 바꾸지 만 onclick을 추가했다. 그들은 여전히 ​​페이지를 다시로드하고있다. 이를 막기 위해 양식 입력에 필요한 것은 무엇입니까?

내 새로운 형태의 어떤 도움도 크게 감사이

<form action='' method='post'> 
    <input type='image' 
     src='$folder_icon' 
     alt='Submit' 
      name='' 
     onclick='clickity()' 
      value='submit'/> 

     <input type='hidden' 
       value='$f_path/$value' 
     name='selected_dir'/> 

     <input type='submit' 
     value='$value' 
     name='$value' 
     onclick='clickity()' 
        class='submit_into_link'/> 
</form> 

것 같습니다.

Answer 1

당신은 이런 식으로 작업을 수행 할 수 있습니다

HTML

<form action='explore.php' method='post' id='myForm'> 

JQuery와

$('#myForm').submit(function(event){ //added event 
    event.preventDefault(); //added to prevent submit 
    $.ajax 
     ({ 
     type: 'POST', 
     url: 'explore_be.php', 
     data: data, success: 
     success function(data, textStatus, jqXHR), 
     complete: function(), 
     dataType: dataType 
    }); 


}); 

편집 : 당신이

Answer 2

<form action='javascript:;' method='post'> 
    <input type='image' 
     src='$folder_icon' 
     alt='Submit' 
      name='' 
     onclick='clickity();'/> 

     <input type='hidden' 
       value='$f_path/$value' 
     name='selected_dir'/> 

     <input type='submit' 
     value='$value' 
     name='$value' 
     onclick='clickity();' 
     class='submit_into_link'/> 
</form> 

첫째로 당신의 편집에 추가 된 온 클릭 이벤트를 제거 이것을 바꿔서 괜찮 으면 나에게도 같은 양식으로 2 회의 제출이 필요한 이유를 말해 주시겠습니까?

Answer 3

한 번에 세 가지를 시도하고 있습니다. 오류가있는 곳을 찾는 일이 복잡해질 것입니다. 작은 예제없이 jquery없이 ajax를 사용하기 만하면된다. 그런 다음 그것을 확장하십시오.

<html> 
<head> 
<script type="text/javascript"> 
function getdata(str) 
{ 
if (str.length==0) 
    { 
    document.getElementById("result").innerHTML=""; 
    return; 
    } 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("result").innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","response.php?q="+str,true); 
xmlhttp.send(); 
} 
</script> 
</head> 

<input type='submit' onclick='getdata(input)'> 
<div id='result'> 
</div> 
<body>