2

ページをリロードせずに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>

どんな助けでも大歓迎です。

4

3 に答える 3

0

あなたはこのようにそれを行うことができます：

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イベントを削除します

于 2012-04-13T17:48:26.167 に答える
0 
<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回送信する必要がある理由も教えてください。

于 2012-04-13T17:48:46.790 に答える
0

あなたは一度に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>
于 2012-04-13T17:54:26.487 に答える