現在のページをリロードせずに別のページのページコンテンツをフォームサブミットで取得

別のページからデータを取得しようとしていますが、フォームを再ロードせずにフォームのあるページのdivにレスポンスとコンテンツをロードしようとしていますページ。このコードを試してみると、ページがリフレッシュされ、結果がフェッチされません。現在のページをリロードせずに別のページのページコンテンツをフォームサブミットで取得

私は私のフォーム持っている現在のjQueryコード - form.phpを：

<html> 
<head> 
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script> 
<script> 
$('#skipreload').submit(function() { // catch the form's submit event 
    $.ajax({ // create an AJAX call... 
     data: $(this).serialize(), // get the form data 
     type: $(this).attr('GET'), // GET or POST 
     url: $(this).attr('dbresults.php'), // the file to call 
     success: function(response) { // on success.. 
      $('#form_output').html(response); // update the DIV 
     } 
    }); 
    return false; // cancel original event to prevent form submitting 
}); 
</script> 
</head> 
<body> 

<form id="skipreload" method="GET" action="form.php"> 
<input type="text" name="id"> 
<input type="submit" value="Get results"> 
</form> 

<div id="form_output"> 
<!--Show the result here from dbresults.php--> 
</div> 

</body> 
</html>

私はからの結果取得したいページ内のコード - dbresults.php：

include("dbsettings.php"); 

$id = ""; 

if ($_GET) 
{ 
$id = $_GET['id']; 

    $sql = "SELECT Results FROM Table WHERE id = '$id';"; 
    $result = mysql_query($sql); 

    while($row = mysql_fetch_array($result)) 
    { 
     echo $row["Results"]"; 
    } 
}

I form.phpでフォームを送信すると、getresults.phpのdivに "#form_output"という結果が表示されずにページがリロードされます - なぜ動作しませんか？

出典

2016-04-17 eqinna

：あなたのコードは、フォームの前に呼び出されているほか

は

てみ存在します。将来的に考えるべきこと。 – 4castle

属性GETはありません。値はmethodであり、action属性の値である属性'dbresults.php'はありません。あなたが自分でこの問題を解決する助けている可能性がブラウザのデベロッパーコンソールを見ると

$(function(){ // wait until documented is ready so element exists 

    $('#skipreload').submit(function() { // catch the form's submit event 
     $.ajax({ // create an AJAX call... 
      data: $(this).serialize(), // get the form data 
      type: $(this).attr('method'), // GET or POST 
      url: $(this).attr('action'), // the file to call 
      success: function(response) { // on success.. 
       $('#form_output').html(response); // update the DIV 
      } 
     }); 
     return false; // cancel original event to prevent form submitting 
    }); 

});

出典

2016-04-17 13:45:17 charlietfl

このコードはうまくいかない...それは'dbresults.php'の代わりに' form.php'を使用しました。 – 4castle

.attr（）をスキップしましたが、$（function（）{...で囲んでドキュメントが用意できるまで待ってから解決しました！:) – eqinna

偉大な！私はちょうどあなたがその答えを見つけた場所のために信用があると言っています。もちろん、あなたはこの答えを見つけていない限り、 "もっと役に立ちました。 – 4castle

$.ajaxコールでエラーが発生しました。現在フォーム上の値を使用する場合は.attr()のみを使用し、属性値ではなく、の名前を選択する必要があります。

に変更し、それを：あなたはまた、他に$.get

$.get('dbresults.php', $(this).serialize(), function(response) { 
    $('#form_output').html(response); 
});

を使用して同じタスクを実行することができます

$.ajax({ // create an AJAX call... 
    data: $(this).serialize(), // get the form data 
    type: 'GET', // GET or POST 
    url: 'dbresults.php', // the file to call 
    success: function(response) { // on success.. 
     $('#form_output').html(response); // update the DIV 
    } 
});

、あなたが.ready()ブロックでコードをラップする必要があります。

$(document).ready(function() { // alternatively $(function() { 
    [...] 
});

出典

2016-04-17 13:37:37 4castle

まだ動作していません。 :-( – eqinna

私はあなたのコードがページの読み込みが完了する前に実行されていないことを確認するために 'ready'関数を使用していないことに気づいた。 – 4castle

現在のページをリロードせずに別のページのページコンテンツをフォームサブミットで取得

答えて

関連する問題