Ajax jquery php post beginner

Ajax jquery php post beginner

本文关键字:beginner post php jquery Ajax      更新时间:2023-09-26

我很难学习如何使用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';
 }

这就是页面隐藏代码的全部内容吗?

我将表单更改为没有操作,但添加了单击它们仍在重新加载页面。我需要对表单输入执行什么操作才能阻止这种情况?

我的新表单如下所示

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

任何帮助将不胜感激。

你可以这样做:

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

});
编辑

:删除您在编辑中添加的点击事件

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

您一次尝试三件事。 这将使找到错误所在变得复杂。只需使用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>