Ajax jquery php post beginner

Question

Мне сложно учиться использовать ajax и 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, и я даже не использовал javascript до сих пор. Ive читал через учебники и я не могу действительно соединить точки, чтобы сделать эту работу

Я есть это в моем заголовке

<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 
    }); 

У меня есть несколько вопросов о коде выше. Я не уверен, как его использовать. Нужно ли мне помещать этот код ajax внутри функции onclick? Кажется, что некоторые примеры рассмотрены в jquery в jQuery.

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

.flip выше - это класс. Я видел, что они используют кнопку, когда говорят о

<button> 

но как насчет кнопки в форме с определенным идентификатором ввода? Или я должен просто добавить к форме ввод onclick = "clicked()", а затем добавить ajax в эту функцию? Требуется ли ajax в $ (document) .ready (function())?

Что мне следует указать для типа данных?

Я поместил свой PHP-код в файл expl_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 
    }); 


}); 

редактировать: удалять OnClick события, добавленные в вашем редактировать

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

Вы пытаетесь три вещи за раз. что усложнит ситуацию, где ошибка. Просто используйте ajax без jquery с небольшим примером. Затем расширьте его.

<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>