2012-05-08 10 views
8

http://pastebin.com/dttyN3L6継続的に私は本当に私はこれを行うだろうかわからない午前またはjqueryの/ JSを使用したことがない <p></p> upload.phpフォームを処理するファイルが呼び出された

ページの一部を更新する方法どこにコードを書いていますか?それはまた、このsetInterval (loadLog, 2500);

とは何かを持っている

、どのように私はそれはユーザがさわやかページせずにフォームを送信することができますすることができますか?

$.ajax({ 
    type: "POST", 
    url: "upload.php", 
    data: dataString, 
    success: function() { 

    } 
}); 
return false; ` 

<?php 
$conn1 = mysqli_connect('xxx') or die('Error connecting to MySQL server.'); 
$sql = "SELECT * from text ORDER BY id DESC LIMIT 1"; 
$result = mysqli_query($conn1, $sql) or die('Error querying database.'); 
while ($row = mysqli_fetch_array($result)) { 
     echo '<p>' . $row['words'] . '</p>'; 
} 
mysqli_close($conn1); 

?> 

</div> 

<?php  
if (!isset($_SESSION["user_id"])) { 

} else { 
     require_once('form.php'); 
} 

?> 
+0

ペーストビンのインデントは何ですか?ここにあなたのコードを投稿できますか? – elclanrs

+0

あなたのためだけ@elclanrs – JakeParis

+0

jQueryの[PeriodicalUpdater](http://archive.plugins.jquery.com/project/periodicalupdater)プラグインを調べてください。 – nickb

答えて

9

あなたは、このようなページに何か更新せずにフォームを送信することができます

form.php:

<form action='profile.php' method='post' class='ajaxform'> 
<input type='text' name='txt' value='Test Text'> 
<input type='submit' value='submit'> 
</form> 

<div id='result'>Result comes here..</div> 

profile.php:

<?php 
     // All form data is in $_POST 

     // Now perform actions on form data here and 
     // create an result array something like this 
     $arr = array('result' => 'This is my result'); 
     echo json_encode($arr); 
?> 

のjQueryを:

このような
jQuery(document).ready(function(){ 

    jQuery('.ajaxform').submit(function() { 

     $.ajax({ 
      url  : $(this).attr('action'), 
      type : $(this).attr('method'), 
      dataType: 'json', 
      data : $(this).serialize(), 
      success : function(data) { 
         // loop to set the result(value) 
         // in required div(key) 
         for(var id in data) { 
          jQuery('#' + id).html(data[id]); 
         } 
         } 
     }); 

     return false; 
    }); 

}); 

そして、あなたが特定の時間の後にページを更新せずに、AJAXリクエストを呼び出したい場合は、あなたが試すことができる何か:あなたはこのような任意の時点でタイマーを停止することができます

var timer, delay = 300000; 

timer = setInterval(function(){ 
    $.ajax({ 
     type : 'POST', 
     url  : 'profile.php', 
     dataType: 'json', 
     data : $('.ajaxform').serialize(), 
     success : function(data){ 
        for(var id in data) { 
        jQuery('#' + id).html(data[id]); 
        } 
       } 
    }); 
}, delay); 

そして、 :

clearInterval(timer); 

希望すると、あなたのタスクを完了するための指示が与えられます。

+5

for(index in array)を使用する代わりに、jQueryの$ .each()メソッドを使用する必要があります。私はあなたが図書館を持っているならば、あなたはそれを十分に活用し、混在してはならないと信じる傾向があります。 –

0

これは非常に簡単です。あなたが追加している

var fooVal = $("input[name=foo]").val(); 

がサーバにそれを上に送信するには: は、次の名前「foo」というあなたがして、入力フィールドの値を取得するには、例えば、jQueryのあなたはCSSセレクタを使用して使用して要素にアクセスするにはイベントリスナー(例えば、クリックする)submitボタン/他の要素

var data = { varName : fooVal }; 
var url = "http://example.com"; 
var responseDataType = "json"; 
function parseResponse(JSON) 
{ 
    // your code handling server response here, it's called asynchronously, so you might want to add some indicator for the user, that your request is being processed 
} 

$("input[type=submit]").on('click', function(e){ 
    e.preventDefault(); 
    $(this).val("query processing"); 
    $.post(url,data, parseResponse, responseDataType); 
return false; 
}); 

にあなたが一定の更新を行いたい場合は、もちろん、タイマーまたは他のいくつかのロジックを追加することができます。しかし、私はあなたがそのような場合に進む方法の考えを得ることを願っています。

0

あなたの質問の一部に答えるには、ajaxを使用できます。

<html><head></head><body> 
<div id="feed"></div> 
<script type="text/javascript"> 
var refreshtime=10; 
function tc() 
{ 
asyncAjax("GET","upload.php",Math.random(),display,{}); 
setTimeout(tc,refreshtime); 
} 
function display(xhr,cdat) 
{ 
if(xhr.readyState==4 && xhr.status==200) 
{ 
    document.getElementById("feed").innerHTML=xhr.responseText; 
} 
} 
function asyncAjax(method,url,qs,callback,callbackData) 
{ 
    var xmlhttp=new XMLHttpRequest(); 
    //xmlhttp.cdat=callbackData; 
    if(method=="GET") 
    { 
     url+="?"+qs; 
    } 
    var cb=callback; 
    callback=function() 
    { 
     var xhr=xmlhttp; 
     //xhr.cdat=callbackData; 
     var cdat2=callbackData; 
     cb(xhr,cdat2); 
     return; 
    } 
    xmlhttp.open(method,url,true); 
    xmlhttp.onreadystatechange=callback; 
    if(method=="POST"){ 
      xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
      xmlhttp.send(qs); 
    } 
    else 
    { 
      xmlhttp.send(null); 
    } 
} 
tc(); 
</script> 
</body></html> 
関連する問題

 関連する問題