Ajax jquery php post初学者

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。我一直读通过教程，我真的不能连接点，使这项工作

我有这个在我的头

<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函数中？看起来像一些例子ive通过jQuery使用这样的东西看看..

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

.flip上面是一个类。我看到他们在谈论时使用按钮

<button> 

但是如何使用特定输入ID的表单中的按钮？或者我应该只添加到表单输入 onclick =“clicked（）”，然后把ajax放在那个函数中？ ajax是否也需要在$（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> 

首先的onclick事件改变这个和te如果没关系，请告诉我为什么你需要在同一个表格上提交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>