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>

Ajax jquery php post初学者

3 个答案: