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 函数中？似乎我在 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 
    });


});

编辑：删除您在编辑中添加的 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

您一次尝试三件事。这将使找到错误所在的事情变得复杂。只需通过一个小例子使用没有 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>