Ajax jquery PHP post beginner

私は、ページをリロードせずにボタンをポストするためにajaxとjqueryを使用する方法を学ぶのに苦労しています。具体的には、フォームはまだページをリロードしており、変数は更新されていません。Ajax jquery PHP post beginner

ここに私がつまずくコードがあります。

私がJquery/AJAXを試してみる前に使ったこと。ちょうど

このように、画像やページがリロードするリンクをクリックするたびに表示されます。私は最終的に結論に達しました。私は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>

のように見えます。

出典

2012-04-13 user1331963

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

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


});

編集：あなたは

出典

2012-04-13 17:48:26

私はこれまでのところこの例が最高です。 Jonurが「javascript：;」と提案したものを除いて、アクションフィールドに何かを入れても、ページをリロードするようだ。私があなたの例を使用した時にはfalseを返します。 onlcickを削除してもページがリロードされました。 btwあなたは変数を取得するJava関数のいくつかのちょっとの中にPHPの後ろにコードをラップする必要があると思いますか？ – user1331963

このフォーム送信機能も$（document）.ready（function（））の内部にある必要がありますか？ – user1331963

いいえ、文書の準備ができている必要はありません。また、更新されたコード –

<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イベントを削除それを変えてそれは大丈夫だと私にも私は同じフォームで2つの提出が必要な理由を教えてください？

出典

2012-04-13 17:48:46

を確認しました。私はそれを変更しました。実際には、ページの再読み込みを停止しました。私はこれが良い答えであるかどうかは確かではありませんが、確かに私の問題の一部が解決されているようです。 2つの入力を使用しました.1つはリンク用で、もう1つは画像用です。これは、私が知っている唯一の方法は、PHPのみを使用しているが、ここで他の答えから、私はクリックされたフォームと2の必要性を根絶するような特定の入力を探すことができるようだ。あなたの例を使用するajax関数は、 $（document）.ready（function（））のどれか？ – user1331963

あなたは一度に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-13 17:54:26 Anil

私は一般的に、1つには多くのことを学ぶことができますという原則に同意します。しかし、AJAXの場合は、最初からライブラリを使用してください。生JSよりjQueryコードが少なく、ブラウザーの違いは '：）'から隠されています。 – halfer

答えて

関連する問題